jquery UI AutoComplete Auto-complete

Official website: http://jqueryui.com/autocomplete

The simplest form:

var availabletags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C + +",
"Clojure",

];
$ ("#tags"). AutoComplete ({
Source:availabletags
});

There are several forms of data source sources:

Source

Type: Array or String or function (object request, function response (object data))

Default: none; must be specifiedDefines the data to use, must is specified.

Independent of the variant, the label is always treated as text. If you want the label to be treated as HTML you can use Scott González ' HTML extension. The demos all focus on different variations source of the Option-look for one, matches your use case, and check out T He code.

Multiple types Supported:

• Array : An array can is used for local data. There is supported formats:
  • An array of Strings:  ["Choice1", "C Hoice2 "]
  • An array of objects with  label  and  value & nbsp;properties:  [{label: ' Choice1 ', Value: ' value1 '}, ...]
  The
  the Label property was displayed in the suggestion menu. The value would be inserted to the INPUT element when a user selects an item. If just one property is specified, it'll be used for both, e.g., if you provide only  value properties, The value would also be used as the label.
• string: When a String was used, the Autocomplete plugin expects that String to point to a URL resource that WI ll return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead a query string was added with a term field, which the server- Side script should use for filtering the results. For example, if the source option was set to "http://example.com" and the user types foo , a GET request would was made to http://example.com?term=foo . The data itself can is in the same format as the local data described above.
• Function: The third variation, a callback, provides the most flexibility and can is used to connect all data source to Autocomplet E. The callback gets the arguments:
  • a  request  object, with A single  term  property , which refers to the value currently in the text input. (input box value) For example, if the user enters  "New Yo"  in a City field, and the Autocomplete term would equal& nbsp "New Yo" .
  • a  response  callback, which expects A single argument:the data to suggest to the user. This data should is filtered based on the provided term, and can is in all of the formats described above for simple local Data. It ' s important when providing a custom source callback to handle errors during the request. You must always call the , response  callback Even if you encounter an error. This ensures, the widget always had the correct state.

  When filtering data locally, you can make use of the built-in $.ui.autocomplete.escapeRegex function. It ' ll take a single string argument and escape all regex characters, making the result safe to pass to new RegExp() .

Code Examples:

Initialize the AutoComplete with the source option specified:

1	$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

Get or set source the option, after initialization:

var source = $( ".selector" ).autocomplete( "option", "source" ); // setter $( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );、 This is useful, and sometimes we want to change the value of the source after initialization. To the following example:

 varCache=[]; varFirstloaded=true; $(". Input"). AutoComplete ({minLength:0, Source:cache}). Focus (function () {varthat=$ ( This); if(firstloaded) {varret=[]; $.getjson ('URL', {},function (data) { for(varIinchdata)              {Ret.push (data[i]); } Cache=ret; firstloaded=false; that.autocomplete ({source:cache}); //must be re-loadedThat.autocomplete ('Search');          }); }          Else{that.autocomplete ('Search'); }           });

I thought the initialization was

Source:cache points to a reference, Ajax changes the value of the cache should work, but backfired, must, recall

That.autocomplete ({Source:cache}) to function.

The above example also shows how to display auto-complete as soon as input gets the focus. Here are 2 keywords.

The focus function calls AutoComplete to trigger search, and one point is to set MaxLength to 0 because the search function triggered before a search is performed and after And minLength are met. delay If canceled, then no request would be started and no items suggested.

JQuery UI AutoComplete auto-complete