<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Search Plugins </title>
<link href= "Http://www.imooc.com/data/jquery.autocomplete.css" rel= "stylesheet" type= "Text/css"/>
<link href= "Style.css" rel= "stylesheet" type= "Text/css"/>
<script type= "Text/javascript" src= "Http://www.imooc.com/data/jquery-1.8.2.min.js" ></script>
<script src= "Http://www.imooc.com/data/jquery.autocomplete.js" type= "Text/javascript" ></script>
<body>
<div id= "Divtest" >
<div class= "title" >
<span class= "FL" > Search plugin </span>
</div>
<div class= "Content" >
<span class= "fl" >username</span><br/>
<input id= "Txtsearch" name= "Txtsearch" type= "text"/>
<div class= "Tip" >
</div>
</div>
</div>
<script type= "Text/javascript" >
$ (function () {
var arrusername = ["Harry", "Liu Ming", "Li Xiaoxi", "Liu Ming", "Liyuan", "Zhangxiao", "Wang Xiaoming"];
$ ("#txtSearch"). AutoComplete (arrusername,{
minchars:0,//display all prompt data when double-clicking a blank text box
Formatitem:function (data, I, total) {
Return "<I>" + data[0] + "</I>"; Change the format of the matching data display
},
Formatmatch:function (data, I, total) {
return data[0];
},
Formatresult:function (data) {
return data[0];
}
}). result (Searchcallback);
function Searchcallback (event, data, formatted) {
$ (". Tip"). Show (). HTML ("Your choice is:" + (!data?). "EMPTY": formatted));
}
});
</script>
</body>
jquery Search Plugin Auntocomplete
