JQuery UI AutoComplete instructions

Introduction
The AutoComplete control is added to the latest update of jQuery UI, which provides us with another powerful development tool. Here we will introduce how to use this control.
First, jQuery UI is based on jQuery. Therefore, you must first reference the jQuery script library on your page and then reference the jQuery UI library. For the jQuery UI library, you can reference the entire library or just the library used on the current page.
JQuery UI: http://jqueryui.com/download
I. basic configuration
Generally, referencing an independent script can reduce the page size. Here we use an independent script. For autocomplete, the following script files are involved.
Copy codeThe Code is as follows:
<Script src = "jquery-1.5.1.min.js" type = "text/javascript"> </script>
<Script src = "jquery. ui. core. js"> </script>
<Script src = "jquery. ui. widget. js"> </script>
<Script src = "jquery. ui. position. js"> </script>
<Script src = "jquery. ui. autocomplete. js"> </script>

Of course, there must be an input box on the page.
Copy codeThe Code is as follows:
<Div class = "demo">
<Div class = "ui-widget">
<Label for = "tags">
Tags:
</Label>
<Input id = "tags" type = "text">
</Div>
</Div>

Ii. Use local data

For use, the basic usage is very simple, and the data prompted can come from an array. Set the data source through the source attribute of the parameter object.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (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"
];
// Array is used as the data source. availableTags is the name of the array.
$ ("# Tags"). autocomplete ({
Source: availableTags
});
});
</Script>

Now, the effect of Automatic completion is ready to work.

3. Use Remote Data sources
You can also set a remote address string for the source attribute to obtain json data.
For autocomplete, When you provide an address, a GET request will be sent to the address when the user starts to input it in the input box, the parameter named term in the request indicates the content of the current input,
The returned result must be in json format.
JSON detailed description here: http://www.json.org/json-zh.html
Copy codeThe Code is as follows:
Var url = "serviceHandler. ashx ";
$ ("# Auto"). autocomplete (
{
Source: url
}
);

We can return data through a general processing program. Note that the returned string must comply with the JSON format and the string must use double quotation marks.
Copy codeThe Code is as follows:
Public class serviceHandler: IHttpHandler {
Public void ProcessRequest (HttpContext context ){
Context. Response. ContentType = "text/plain ";
HttpResponse response = context. Response;
System. IO. TextWriter writer = response. Output;
// Note that the string must be a standard JSON string and must use double quotation marks
Writer. Write ("[\" One \ ", \" Two \ ", \" Three \ "]");
}
Public bool IsReusable {
Get {
Return false;
}
}
}

When using remote data, we usually want to enter a few characters before prompting. This can be set through the minLength attribute. If it is a local data source, it is usually 0, this value should be appropriately added for remote data sources or a large amount of data. In this way, our script will become the following.
Copy codeThe Code is as follows:
Var url = "serviceHandler. ashx ";
$ ("# Auto"). autocomplete (
{
Source: url,
MinLength: 2
}
);

4. cached Remote Data sources
By providing a function for source, we can add a local cache for remote data. In this way, you do not have to go to the server for query every time.
Copy codeThe Code is as follows:
$ (Function (){
Var url = "serviceHandler. ashx ";
Var cache ={}, lastXhr;
$ ("# Auto"). autocomplete ({
MinLength: 2,
Source: function (request, response ){
Var term = request. term;
If (term in cache ){
Response (cache [term]);
Return;
}
LastXhr = $. getJSON (url, request, function (data, status, xhr ){
Cache [term] = data;
If (xhr === lastXhr ){
Response (data );
}
});
}
});
}
);