Use JQuery UI Autocomplete
JQuery. Autocomplete is a popular plug-in of jquery. It can automatically complete the input box (autocomplete) and suggest the input suggest function, and supports ajax data loading.
Http://jqueryui.com/autocomplete/
A complete simple example on the official website:
- <! Doctype html>
- <Html lang = "en">
- <Head>
- <Meta charset = "UTF-8">
- <Title> jQuery UI Autocomplete-Default functionality </title>
- <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
- <Script src = "// code.jquery.com/jquery-1.10.2.js"> </script>
- <Script src = "// code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
- <Link rel = "stylesheet" href = "/resources/demos/style.css">
- <Script>
- $ (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"
- ];
- $ ("# Tags"). autocomplete ({
- Source: availableTags
- });
- });
- </Script>
- </Head>
- <Body>
- <Div class = "ui-widget">
- <Label for = "tags"> Tags: </label>
- <Input id = "tags">
- </Div>
- </Body>
- </Html>
1. Data Source designation
The main parameter of this function is source. Set the matching menu to match the data items. Setting method:
1. string array parameter. Format: ["Choice1", "Choice2"]
- During initialization:
- $ (". Selector "). autocomplete ({source: ["c ++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]});
- After Initialization
- // Getter
- Var source = $ (". selector"). autocomplete ("option", "source ");
- // Setter
- $ (". Selector "). autocomplete ("option", "source", ["c ++", "java", "php", "coldfusion", "javascript", "asp ", "ruby"]);
2. object array parameters, in the format of [{label: "Choice1", value: "value1"},...] label indicates the value of the item displayed in the matching menu, and value indicates the actual value from append to <input> after this matching item is selected.
3. If the string parameter is a string parameter, a remote data source is specified. After the <input> event changes, the data is sent to the remote data source in GET mode. The input content is saved with the term parameter;
For example, if the parameter is http: // remoteSource, a GET request, such as http: // remoteSource? Term = abc
The returned results must be in json format, as described in 1 and 2 above.
Then receive it on the server side and output the corresponding results. Note that the default parameter name is "term:
- Public void ProcessRequest (HttpContext context)
- {
- // The default query parameter name is term.
- String query = context. Request. QueryString ["term"];
- Context. Response. ContentType = "text/javascript ";
- // Output string array or JSON Array
- Context. response. write ("[{\" label \ ": \" blog garden \ ", \" value \ ": \" cnblogs \ "}, {\" label \": \ "monthly subscription \", \ "value \": \ "monthly subscription \"}] ");
- }
4. The function parameter, in the format of Function (Object request, Function response (Object data), is the most flexible and allows you to issue queries to the server in your own way and parse the data yourself, finally, write the data back to response.
- $ (". Selector"). autocomplete ({
- Source: function (request, response ){
- // Obtain user input
- Var term = request. term;
- // Obtain data from the server in custom Mode
- ...
- // You can also parse the data yourself
- ..
- // Finally, put the data in the response format described in the previous 1 and 2.
- Response (data );
- }
- });
Example:
- Var hosts = ["gmail.com", "live.com", "hotmail.com", "yahoo.com", "cnblogs.com", "Mars. com", "yuyue. com"];
- $ ("# Email1"). autocomplete ({
- AutoFocus: true,
- Source: function (request, response ){
- Var term = request. term, // request. term is the input string
- Ix = term. indexOf ("@"),
- Name = term, // User name
- Host = "", // Domain Name
- Result = []; // result
- Result. push (term );
- // Result. push ({label: term, value: term}); // json format
- If (ix>-1 ){
- Name = term. slice (0, ix );
- Host = term. slice (ix + 1 );
- }
- If (name ){
- Var findedHosts = (host? $. Grep (hosts, function (value ){
- Return value. indexOf (host)>-1;
- }): Hosts ),
- FindedResults = $. map (findedHosts, function (value ){
- Return name + "@" + value; // return string format
- // Return {label: name + "@" + value, value: name + "@" + value}; // json format
- });
- Result = result. concat ($. makeArray (findedResults ));
- }
- Response (result); // present the result
- }
- });
Feature 2:
This automatic complementing function supports <input> <textarea> or labels with the contenteditable attribute.
Keyboard operation:
1. You can select matching items for the up and down keys.
2. The matching menu can be disabled by esc.
3. enter to select the currently selected match
4. pageup pagedown can be used to match the scroll bar in the menu.
CSS:
1. ui-autocomplete: matches the css attribute of the matching item in the menu
2. ui-autocomplete-input: attributes of the input box
Dependency:
<Link rel = "stylesheet" href = "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<Script src = "http://code.jquery.com/jquery-1.9.1.js"> </script>
<Script src = "http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
Three major events
There are some events that can be used for additional control at some stages:
Create (event, ui): when creating Autocomplete, you can control the appearance in this event.
Search (event, ui): Before starting a request, you can return false in this event to cancel the request.
Open (event, ui): When the Autocomplete result list is displayed
Focus (event, ui): if any item in the Autocomplete result list obtains focus, ui. item is the item that obtains focus.
Select (event, ui): When any item in the Autocomplete result list is selected, ui. item is selected
Close (event, ui): When the Autocomplete result list is closed
Change (event, ui): When the value changes, ui. item is the selected item
By default, the item attributes (if any) of the ui parameters of these events have the label and value attributes, regardless of whether the data set in source is an Array or a JSON Array:
["Cnblogs", "", ""]
[{Label: "", value: "cnblogs" },{ label: "", value: ""}]
[{Label: "", value: "cnblogs", id: "1" },{ label: "", value: "", id: "2"}]
For example, you can obtain the value of ui. item. id.
These events can be bound in two ways:
- // In the Parameter
- $ ("# Autocomp"). autocomplete ({
- Source: availableTags
- , Select: function (e, ui ){
- Alert (ui. item. value)
- }
- });
- // Bind
- $ ("# Autocomp"). bind ("autocompleteselect", function (e, ui ){
- Alert (ui. item. value );
- });
The event name used for bind binding is "autocomplete" + event name. For example, "select" is "autocompleteselect ".
Autocomplete with more than four values
Generally, the autocomplete in the input box only requires one value (for example, javascript). If multiple values (for example, javascript, c #, asp.net) are required ), you need to bind some events for additional processing, specific can refer to http://www.cnblogs.com/lwme/archive/2012/02/12/jquery-ui-autocomplete.html
