Post
Ask Question

jQuery UI Autocomplete

Introduction

Autocomplete is one of the best widgets in websites and is used in nearly all websites. jQuery has a powerful widget, autocomplete, and in this article I will try to explain how to use jQuery autocomplete in websites. All the way and all other features of autocomplete. We can make autocomplete, using AJAX, to call to build a list (server-side) and then bind that list into a text box using JavaScript. However there are other alternative to make autocomplete rather then this in an easy way.

The most robust and efficient tool of autocomplete is jQuery-ui autocomplete and this tool is free and there is no need to license it. Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, this tool reduces the overhead of searching and filtering.

Any field that can receive input can be converted into an Autocomplete, like <input> element, <textarea> element and any other element having the contenteditable attribute.

Points to remember      

  • The Autocomplete widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS as a starting point.
  • This widget manipulates its element's value programmatically, therefore a native change event may not be fired when the element's value changes.

List of examples

  • Default functionality
  • Accent folding
  • Cumbobox
  • Multiple values
  • Remote Datasource
  • Scrollable result

Default functionality

In this category, we will see the code, output screen and syntax.

JavaScript code 

  1. $(document).ready(function () {  
  2.      var a=[  
  3.      "one",  
  4.      "two",  
  5.      "three",  
  6.      “four",  
  7.      "five",  
  8.      "six",  
  9.      "seven",  
  10.      "eight",  
  11.      "nine",  
  12.      "ten",  
  13.      "eleven",  
  14.      "tweleve"  
  15.      "thirteen",  
  16.      "fourteen", ];  
  17.     $("#auto").autocomplete({  
  18.     source: a  
  19.     });  
  20. });    

In this code we have created a data source, the data source is in array and that source is bound with the <input> id. element.

 HTML code 

  1. <html >  
  2. <head>  
  3.     <title>jQuery UI Autocomplete - Default functionality</title>  
  4.     <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">  
  5.     <script src="Scripts/jquery-ui-1.10.4.min.js"></script>  
  6.     <script src="Scripts/jquery-1.6.4.js"></script>  
  7.     <script src="Scripts/jquery-ui-1.10.4.min.js"></script>  
  8.     <script src="Scripts/AutoComplete.js"></script>  
  9. </head>  
  10. <body>  
  11.     <input type="text" id="auto" />  
  12. </body>  
AutoComplete1


Accent folding

In this option the autocomplete field uses a custom source option that matches the results on the basis of accented characters, even when the text field doesn't contain an accented character. If we type an accented character in the text field it is smart enough not to show the result that are not accented.

JavaScript code
  1. $(document).ready(function () {  
  2. var names = ["rájeev", "ranjan", "röhan", "rashmi"];  
  3. var accentMap = {  
  4.         "á": "a",  
  5.         "ö": "o"  
  6.     };  
  7.  var normalize = function (term) {  
  8.  var ret = "";  
  9.  for (var i = 0; i < term.length; i++) {  
  10.  ret += accentMap[term.charAt(i)] || term.charAt(i);  
  11.         }  
  12.         return ret;  
  13.     };  
  14.   
  15.     $("#name").autocomplete({  
  16.     source: function (request, response) {  
  17.     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");  
  18.     response($.grep(names, function (value) {  
  19.     value = value.label || value.value || value;  
  20.     return matcher.test(value) || matcher.test(normalize(value));  
  21.             }));  
  22.         }  
  23.     });  
  24. });  
HTML code 
  1. <body>  
  2.     <label for="name">Name: </label>  
  3.     <input id="name">  
  4. </body>  
  1. AutoComplete2

Combobox

Cumbobox is a custom widget, that is composition of Autocomplete and button. we can either type something into the field to get filtered suggestion based on our input, or use the button to get the full list of selections.The input is read from existing select-element for progressive enhancement, passed to Autocomplete with a customized source- option.  

Multiple values

This is also a custom widget of autocomplete, in this we can search by any character and display multiple values into a single field.

Remote datasource

The autocomplete widget provides suggestions while we type into field, and the datasource is a server-side side data , either JASON data, any any web services.

Scrollable result

When  we type any character in text box the filtered result are shows in scrollable format.

  1. <html>  
  2. <head>  
  3.     <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">  
  4.     <script src="Scripts/jquery-ui-1.10.4.min.js"></script>  
  5.     <script src="Scripts/jquery-1.6.4.js"></script>  
  6.     <script src="Scripts/jquery-ui-1.10.4.min.js"></script>  
  7.     <title></title>  
  8. <style>  
  9. .ui-autocomplete {  
  10.     max-height: 100px;  
  11.     overflow-y: auto;  
  12.     /* prevent horizontal scrollbar */  
  13.     overflow-x: hidden;  
  14. }  
  15. * html .ui-autocomplete {  
  16. height: 100px;  
  17. }  
  18. </style>  
  19. <script>  
  20. $(function () {  
  21. var availableTags = [  
  22.  "ActionScript",  
  23. "AppleScript",  
  24. "Asp",  
  25. "BASIC",  
  26. "C",  
  27. "C++",  
  28. "Clojure",  
  29. "COBOL",  
  30.  "ColdFusion",  
  31. "Erlang",  
  32. "Fortran",  
  33.  "Groovy",  
  34. "Haskell","  
  35. Java",  
  36. "JavaScript",  
  37. "Lisp",  
  38. "Perl",  
  39.  "PHP",  
  40. "Python",  
  41. "Ruby",   
  42. "Scala",  
  43. "Scheme  
  44. ];  
  45. $("#tags").autocomplete({  
  46. source: availableTags  
  47. });  
  48. });  
  49. </script>  
  50. </head>  
  51. <body>  
  52.   <div class="ui-widget">  
  53.      <label for="tags">Tags: </label>  
  54.      <input id="tags">  
  55.   </div>  
  56. </body>  
  57. </html>  

AutoComplete3

Summary 

In this article we saw autocomplete and various ways of using the jQuery autocomplete widget.


Similar Articles