Search and filter based on user input, allowing users to quickly find and select from a preset list of values.
For more details about the Autocomplete widget, please see the API documentation (#).
This chapter uses [search.php download](https://static.jyshare.com/download/search.php).
## Default Functionality
When you type in the input field, the Autocomplete widget provides suggestions. In this example, suggestions for programming languages are provided. You can try typing "ja" to get Java or JavaScript.
The data source is a simple JavaScript array, provided to the widget using the `source` option.
jQuery UI Autocomplete - Default Functionality $(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" ]; $( "#tags" ).autocomplete({ source: availableTags }); });
## Accent Folding
The autocomplete field uses a custom `source` option to match result items with accented characters, even if the text field does not contain accented characters. However, if you type an accented character in the text field, non-accented result items will not be displayed.
Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".
jQuery UI Autocomplete - Accent Folding $(function() { var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ]; var accentMap = { "á": "a", "ö": "o" }; var normalize = function( term ) { var ret = ""; for ( var i = 0; i < term.length; i++ ) { ret += accentMap[ term.charAt(i) ] || term.charAt(i); } return ret; }; $( "#developer" ).autocomplete({ source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" ); response( $.grep( names, function( value ) { value = value.label || value.value || value; return matcher.test( value ) || matcher.test( normalize( value ) ); }) ); } }); });
## Multiple Values
Usage: Type some characters, like "j", to see related programming language results. Select a value, then continue typing characters to add other values.
This example demonstrates how to use the `source` option and some events to implement multiple autocomplete values in a single text field.
jQuery UI Autocomplete - Multiple Values $(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( /,s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#tags" ) // 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( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function( request, response ) { // Delegate back to original list, but only those that match the current 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( ", " ); return false; } }); });
YouTip
## Multiple Values
Usage: Type some characters, like "j", to see related programming language results. Select a value, then continue typing characters to add other values.
This example demonstrates how to use the `source` option and some events to implement multiple autocomplete values in a single text field.