Knowledgebase Home Page  >  RapidSpell Web ASP.NET  >  Behavior Customization
Search the Knowledge Base
Autocomplete and as-you-type support with jQuery
https://keyoti.com/kb/Default.aspx?ToDo=view&questId=278&catId=55

Options

Print this page
Email this to a friend

jQuery UI includes autocomplete functionality through its .autocomplete() widget.  The autocomplete textbox can be as-you-type spell check enabled with RapidSpell Web ASP.NET, and some small code changes/additions.

 

The below code is a working example, but you will need to modify the path to the RapidSpell-AYT.js script to match where it resides in your web application.

 

The code works by activating autocomplete on the RapidSpell IFRAME element and manually handling key events to trigger autocomplete.

 

 

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery UI Autocomplete - Default functionality</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<!--cdn-->

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>

  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

   

  <link rel="stylesheet" href="/resources/demos/style.css">

  <script src="/Scripts/RapidSpell-AYT.js" type="text/javascript"></script>

    <script type="text/javascript">

 

        function cancelBubble(e) {

            var evt = e ? e : window.event;

            if (evt.stopPropagation) evt.stopPropagation();

            if (evt.cancelBubble != null) evt.cancelBubble = true;

        }

 

 

        //cannot use jquery document ready because RapidSpell uses onload for initialization - it does not depend on jquery.

        //$(function () {

        var autocomplete_Onload = window.onload;

        var autocompleter;

        var autocomplete_workaround_active_item = 0;

        window.onload = function () {

            if (typeof (autocomplete_Onload) == 'function') autocomplete_Onload();

            var availableTags = [

             "ActionScript",

             "AppleScript",

             "Asp",

             "BASIC",

             "C",

             "C++",

             "Clojure",

             "COBOL",

             "ColdFusion",

             "Erlang",

             "Fortran",

             "Groovy",

             "Haskell",

             "Java",

             "JavaX",

             "JavaScript",

             "Lisp",

             "Perl",

             "PHP",

             "Python",

             "Ruby",

             "Scala",

             "Scheme"

            ];

 

            autocompleter = $("#tags_IF").autocomplete({

                source: availableTags,

                select: function (event, ui) {

 

                    rsw_getTBSFromID("tags", false).setContent(ui.item.value);

                }

            });

 

 

            $('#tags').on('keyup', rs_keyup);

        }

 

        function rs_keyup(e) {

 

 

            var menuItemCount = $('#tags_IF').autocomplete('widget').menu()[0].children.length;

 

            if (e.keyCode == 40) {//DOWN

                var ev = $.Event('keydown');

                ev.which = 40;

 

                autocomplete_workaround_active_item = 1 + (autocomplete_workaround_active_item % menuItemCount);

                $('#tags_IF').autocomplete('widget').menu('focus', null, $('#tags_IF').autocomplete('widget').menu().find(".ui-menu-item:nth-child(" + autocomplete_workaround_active_item + ")"));

                cancelBubble(e);

            } else if (e.keyCode == 38) {//DOWN

                var ev = $.Event('keydown');

                ev.which = 38;

 

                if (autocomplete_workaround_active_item-- == 0) autocomplete_workaround_active_item = menuItemCount;

                $('#tags_IF').autocomplete('widget').menu('focus', null, $('#tags_IF').autocomplete('widget').menu().find(".ui-menu-item:nth-child(" + autocomplete_workaround_active_item + ")"));

                cancelBubble(e);

            } else if (e.keyCode == 13) {//ENTER

                var ev = $.Event('keydown');

                ev.which = 13;

                ev.target = $('#tags_IF').autocomplete('widget').menu().find(".ui-menu-item:nth-child(" + autocomplete_workaround_active_item + ")");

                $('#tags_IF').autocomplete('widget').menu('select', ev);

                cancelBubble(e);

            } else {

                $('#tags_IF').autocomplete('search', rsw_getTBSFromID("tags", false).getContentText());

            }

        }

 

 

 

    </script>

</head>

<body>

    <form>

<div class="ui-widget">

  <label for="tags">Tags: </label>

  <input id="tags" type="text"  onkeyup="$('#tags_IF').autocomplete('search', this.value)" >

 

</div>

    </form>

 

</body>

</html>


Related Questions:

Attachments:

No attachments were found.