Home > Developer > JavaScript
Jquery-autocomplete Configuration:
<Script type = "text/javascript" src = "/javascript/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "/js/jquery. autocomplete. min. js"> </script>
<Link rel = "Stylesheet" href = "/js/jquery.autocomplete.css"/>
The first is a simple Autocomplete (Automatic completion) code snippet:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> AutoComplate </title>
<Script type = "text/javascript" src = "/javascript/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "/js/jquery. autocomplete. min. js"> </script>
<Link rel = "Stylesheet" href = "/js/jquery.autocomplete.css"/>
<Script type = "text/javascript">
$ (Function (){
Var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities". split ("");
$ ('# Keyword'). autocomplete (data). result (function (event, data, formatted ){
Alert (data );
});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Input id = "keyword"/>
<Input id = "getValue" value = "GetValue" type = "button"/>
</Div>
</Form>
</Body>
</Html>
The result method is an important method in the jQuery Autocomplete plug-in. It is triggered when a user selects an entry. The data parameter is the selected data.
For a slightly complex example, you can customize the prompt list:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> Custom prompt </title>
<Script type = "text/javascript" src = "/javascript/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "/js/jquery. autocomplete. min. js"> </script>
<Link rel = "Stylesheet" href = "/js/jquery.autocomplete.css"/>
<Script type = "text/javascript">
Var emails = [
{Name: "Peter Pan", to: "peter@pan.de "},
{Name: "Molly", to: "molly@yahoo.com "},
{Name: "Forneria Marconi", to: "live@japan.jp "},
{Name: "Master <em> Sync </em>", to: "205bw@samsung.com "},
{Name: "Dr. <strong> Tech </strong> de Log", to: "g15@logitech.com "},
{Name: "Don Corleone", to: "don@vegas.com "},
{Name: "Mc Chick", to: "info@donalds.org "},
{Name: "Donnie Darko", to: "dd@timeshift.info "},
{Name: "Quake The Net", to: "webmaster@quakenet.org "},
{Name: "Dr. Write", to: "write@writable.com "},
{Name: "GG Bond", to: "Bond@qq.com "},
{Name: "Zhuzhu Xia", to: "zhuzhu@qq.com "}
];
$ (Function (){
$ ('# Keyword'). autocomplete (emails ,{
Max: 12, // number of entries in the list
MinChars: 0, // minimum character entered before the activation is completed automatically
Width: 400, // The width of the prompt, overflow hidden
ScrollHeight: 300, // The height of the prompt. the scroll bar is displayed if it overflows.
MatchContains: true, // contains matching, that is, the data in the data parameter, whether to display as long as the data in the text box is included
AutoFill: false, // Auto Fill
FormatItem: function (row, I, max ){
Return I + '/' + max + ': "' + row. name + '" [' + row. to + ']';
},
FormatMatch: function (row, I, max ){
Return row. name + row.;
},
FormatResult: function (row ){
Return row.;
}
}). Result (function (event, row, formatted ){
Alert (row. );
});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Input id = "keyword"/>
<Input id = "getValue" value = "GetValue" type = "button"/>
</Div>
</Form>
</Body>
</Html>
FormatItem, formatMatch, and formatResult are the key to custom prompt information.
FormatItem is used to format entries in the list. For example, we add "I" to display the words in the list in italic.
FormatMatch is used in combination with formatItem. Its function is that because formatItem is used, the content in the item changes, and we need to match the original data, so we need to make an adjustment using formatMatch, match the original data,
FormatResult defines the final returned data. For example, we still need to return the original data instead of the data that has passed formatItem.
Jquery bassistance.de AutoComplete automatically downloads results code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
