AutoComplete TextBox using JQuery in SharePoint 2010

Hi All, 

Recently I had a situation to give an Auto Complete TextBox control in my application (Visual Web part) using JQuery. I have done this by refereeing the below link

Link: Reference

 

The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.

The datasource is a simple JavaScript array, provided to the widget using the source-option.

Now get works the JQuery in SharePoint 2010 Visual webpart 

I have added two js files and one css file in my solution to work the JQuery and give proper style to the textbox and menu items. You can download the js files and css file from the below link

jqueryCustom-1.7.1.min.js

jqueryCustom-ui-1.18.min.js

jquery-uiCustom.css

Then, I written the script and get the array of keywords (Programming languages) and assigned to the source option. Refer the below code snippet:

 <script src="/_layouts/1033/STYLES/jqueryCustom-1.7.1.min.js" type="text/javascript"></script>

<script src="/_layouts/1033/STYLES/jqueryCustom-ui-1.18.min.js" type="text/javascript"></script>

<SharePoint:CssRegistration ID="cssReg" runat="server" Name="/_layouts/1033/STYLES/jquery-uiCustom.css"> </SharePoint:CssRegistration>

  <script type="text/javascript">

      Sys.Application.add_load(wireEvents);

      function wireEvents()

      {

          $(function ()

          {

              var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C",

                                   "C++","Clojure","COBOL","ColdFusion","Erlang",

                                  "Fortran","Groovy","Haskell","Java","JavaScript",

                                   "Lisp","Perl","PHP","Python","Ruby","Scala",                                  

                                   "Scheme"];

              function split(val)

              {

                  return val.split(/,/);

              }

              function extractLast(term)

              {

                  var nonSpaceTerm = split(term).pop().toString();

                  if (/^\s+\S*/.test(nonSpaceTerm))

                  {

                      nonSpaceTerm = nonSpaceTerm.replace(/\s+/, "");

                  }

                  return split(nonSpaceTerm).pop();

              }

              $("input[name*='txtKeyword']")

              // don't navigate away from the field on tab when selecting an item

                     .bind("keydown", function (event)

            {

                         if (event.keyCode === $.ui.keyCode.TAB &&

                                         $(this).data("autocomplete").menu.active) {

                             event.preventDefault();

                         }

                     })

                     .autocomplete(

            {

                         minLength: 0,

                         source: function (request, response)

                {

                             // delegate back to autocomplete, but extract the last term

                             response($.ui.autocomplete.filter(

                                         availableTags, extractLast(request.term)));

                         },

                         focus: function ()

                {

                             // prevent value inserted on focus

                             return false;

                         },

                         select: function (event, ui)

                {

                             var terms = split(this.value);

                             // remove the current input

                             terms.pop();

                             // add the selected item

                             terms.push(ui.item.value);

                             // add placeholder to get the comma-and-space at the end

                             terms.push("");

                             this.value = terms.join(",");

                             this.value += " ";

                             return false;

                         }

                     });

          });

      }           

        </script>

Then added a asp:TextBox control

<asp:TextBox ID="txtKeyword" runat="server"></asp:TextBox>

Done, now deployed and added the webpart in my application.

Output:

I will post how to get the source items from SharePoint2010 list in my next post.

Cheers....................................