首页 > 代码库 > jquery ui autoComplete自动完成
jquery ui autoComplete自动完成
官网:http://jqueryui.com/autocomplete
最简单的形式:
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
];
$( "#tags" ).autocomplete({
source: availableTags
});
数据源source有多种形式:
source:
Type: Array or String or Function( Object request, Function response( Object data ) )
none; must be specified
Independent of the variant you use, 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 of the source
option - look for one that matches your use case, and check out the code.
Multiple types supported:
- Array: An array can be used for local data. There are two supported formats:
- An array of strings:
[ "Choice1", "Choice2" ]
- An array of objects with
label
andvalue
properties:[ { label: "Choice1", value: "value1" }, ... ]
value
properties, the value will also be used as the label. - An array of strings:
- String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will 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 is added with a
term
field, which the server-side script should use for filtering the results. For example, if thesource
option is set to"http://example.com"
and the user typesfoo
, a GET request would be made tohttp://example.com?term=foo
. The data itself can be in the same format as the local data described above. - Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:
- A
request
object, with a singleterm
property, which refers to the value currently in the text input.(输入框的值) For example, if the user enters"new yo"
in a city field, the Autocomplete term will equal"new yo"
. - A
response
callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any 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 theresponse
callback even if you encounter an error. This ensures that the widget always has 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 tonew RegExp()
. - A
Code examples:
Initialize the autocomplete with the source
option specified:
1 | $( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] }); |
Get or set the source
option, after initialization:
var source = $( ".selector" ).autocomplete( "option", "source" );
// setter
$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );、
var Cache=[]; var firstLoaded=true; $(".input").autocomplete({ minLength:0, source: Cache }).focus(function(){ var that=$(this); if(firstLoaded) { var ret=[]; $.getJSON(‘url‘,{},function(data){ for(var i in data) { ret.push(data[i]); } Cache=ret; firstLoaded=false; that.autocomplete({ source: Cache});//一定要重新载入 that.autocomplete(‘search‘); }); } else { that.autocomplete(‘search‘); } });
我以为在初始化是
source: Cache指向的是引用,ajax更改了cache的值应该会起作用的,可是事与愿违,必须,重新调用
that.autocomplete({ source: Cache});方可起作用。
上面的例子也演示了如何当input获得焦点时立即显示自动完成。这里有2个关键字。
focus函数,调用autocomplete触发search,还有一点是设置maxLength为0,因为search函数Triggered before a search is performed, after minLength
and delay
are met. If canceled, then no request will be started and no items suggested.
jquery ui autoComplete自动完成