Jquery-autocomplete configuration:
<script type= "Text/javascript" src= "/js/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 the simplest AutoComplete (auto-complete) code fragment:
Copy Code code as follows:
<title>AutoComplate</title>
<script type= "Text/javascript" src= "/js/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>
<body>
<form id= "Form1" runat= "Server" >
<div>
<input id= "keyword"/>
<input id= "GetValue" value= "GetValue" type= "button"/>
</div>
</form>
</body>
The result method is an important method in the jquery AutoComplete plug-in, which is triggered when a user selects an item. The data parameter is selected.
A slightly more complex example, you can customize the list of hints:
Copy Code code as follows:
<title> Custom Tips </title>
<script type= "Text/javascript" src= "/js/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, {
Number of entries in Max:12,//List
minchars:0,//automatic completion of the minimum characters filled before activation
WIDTH:400,//hint width, overflow hidden
scrollheight:300,//Tip height, overflow display scroll bar
Matchcontains:true,//contains a match, is the data in the parameters, whether as long as the data contained in the text box is displayed
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.to;
},
Formatresult:function (Row) {
return row.to;
}
). Result (function (event, row, formatted) {
alert (row.to);
});
});
</script>
<body>
<form id= "Form1" runat= "Server" >
<div>
<input id= "keyword"/>
<input id= "GetValue" value= "GetValue" type= "button"/>
</div>
</form>
</body>
Formatitem, Formatmatch, FormatResult are the key to customizing the message.
The Formatitem function is to format the entries in the list, for example, we add "I" so that the words in the lists appear italic.
Formatmatch is used in conjunction with Formatitem, the role is, because the use of formatitem, so the contents of the entries have changed, and we want to match the original data, so use Formatmatch to make an adjustment to match the original data,
FormatResult is the data that defines the final return, such as whether we want to return the original data, not the Formatitem data.
jquery bassistance.de autocomplete automatic completion code download
