jQuery UI AutoComplete Instructions_jquery

Introduction
In the recent update of jQuery UI, the automatic completion control AutoComplete has been added, which provides us with another powerful development tool. Here is an introduction to how to use this control.
First of all, jQuery UI is based on jQuery, so you must first reference the jQuery script library in your page, and then reference the jQuery UI library. For the jQuery UI library, you can reference the entire library or just reference it. The library used by the current page.
jQuery UI download address: http://jqueryui.com/download
1. Basic configuration
Generally speaking, referencing independent scripts can reduce For small page sizes, we use a separate script here. For autocomplete, the following script files are involved.

Copy code The code is as follows:

Of course there must be an input box in the page.

Copy code The code is as follows:

Tags:

2. Using local data

For usage, the basic usage is very simple, and the prompted data can come from an array. Set the data source through the source property of the parameter object.

Copy code The code is as follows:

Now, an autocomplete effect is working .

3. Using remote data source
You can also set a string representing the remote address for the source attribute, and obtain json data through this remote address.
For autocomplete, when an address is provided, when the user starts typing in the input box, a GET request will be sent to this address. The parameter named term in the request represents the currently entered content.
The returned result must be data in json format.
Detailed description of JSON is available here: http://www.json.org/json-zh.html

Copy code The code is as follows:

var url = "serviceHandler.ashx";
$("#auto").autocomplete(
{
source: url
}
);

We can return data through a general handler. It is important to note that the returned string must comply with the JSON format requirements, and the string must use double quotes.

Copy code The 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 , must be a standard JSON format string and must use double quotes
writer.Write("["One", "Two", "Three"]");
}
public bool IsReusable {
get {
return false;
}
}
}

Usually when using remote data, we want to prompt the user after entering a few characters. This can be set through the minLength attribute. If it is a local data source, it is usually 0. For remote data sources, or a large number Depending on the data situation, this value should be increased appropriately. In this way, our script will look like the following.

Copy code The code is as follows:

var url = "serviceHandler.ashx";
$("#auto").autocomplete(
{
source: url,
minLength: 2
}
);

IV. Remote data source with cache
By providing a function for source, we can add a local cache for remote data. This eliminates the need to query the server every time.

Copy code The 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);
}
} );
}
});
}
);