JQuery UI AutoComplete Usage Instructions _jquery

Introduced
Adding the AutoComplete control AutoComplete to the most recent update of the JQuery UI gives us yet another powerful development tool that describes how this control is used.
First, the jquery UI is based on jquery, so you must first refer to the jquery Script library in your page and then reference the jquery UI library, which can refer to the entire library for the jquery UI library, or just the library used for the current page.
JQuery UI Download Address: http://jqueryui.com/download
I. Basic Configuration
In general, referencing a standalone script can reduce the size of a page, and we use a standalone script here. For AutoComplete, the following several scripting files are involved.

Copy Code code 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 Code code as follows:

<div class= "Demo" >
<div class= "Ui-widget" >
<label for= "Tags" >
Tags:
</label>
<input id= "tags" type= "text" >
</div>
</div>

two. Using Local data

For use, the basic use is very simple, the hint data can come from the array. Sets the data source through the source property of the Parameter object.

Copy Code code 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"
];
This uses an array as the data source, Availabletags is the name of the array
$ ("#tags"). AutoComplete ({
Source:availabletags
});
});
</script>

Now, the effect of an automatic completion is ready to work.

three. Using Remote data sources
You can also set a string representing the remote address for the source property to obtain the JSON data from this remote address.
For AutoComplete, when an address is provided, when the user starts typing in the input box, a GET request is issued to the address, and the parameter named term in the request represents the current input.
The result returned must be JSON-formatted data.
Detailed description of JSON take part in this: http://www.json.org/json-zh.html

Copy Code code as follows:

var url = "Servicehandler.ashx";
$ ("#auto"). AutoComplete (
{
Source:url
}
);

We can return the data through a generic handler. It is important to note that the returned string must conform to the JSON format requirement and the string must use double quotes.

Copy Code code 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 you must be a standard JSON format string and you must use double quotes
Writer. Write ("[\ one\", \ "two\", \ "three\"]);
}
public bool IsReusable {
get {
return false;
}
}
}

Usually when using remote data, we want to be prompted after the user enters a few characters, which can be set by the MinLength property, if it is a local data source, usually 0, for a remote data source, or a large amount of data, this value should be appropriately added. In this way, our script becomes the following.

Copy Code code as follows:

var url = "Servicehandler.ashx";
$ ("#auto"). AutoComplete (
{
Source:url,
Minlength:2
}
);

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

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