Jquery imitation Baidu search engine auto-complete function

The source code looks like this:

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Auto-complete Example </title>
<script type= "Text/javascript" src= "Js/jquery-1.4.1.min.js" ></script>
<style>
#search Label {
Display:block;
}

#search-text {
width:150px;
}

. placeholder {
Color: #999;
}

/* #sidebar. autocomplete {*/
. autocomplete {
margin:0px;
Position:absolute;
Background: #fff;
border:1px solid #888;
width:110px;
List-style-type:none;
z-index:52;
}

/* #sidebar. AutoComplete li {*/
. AutoComplete Li {
padding:2px;
margin:0;
margin-left:-40px;
}

/* #sidebar. AutoComplete li.selected {*/
. AutoComplete li.selected {
Background: #008;
Color: #fff;
}

</style>

<script type= "Text/javascript";
//Implement auto-complete function like Baidu function
$ (document). Ready (function (e) {
   //bug: Kanji cannot query questions and Null values when to appear value
   var jsondata=["Zhang San", "John Doe", "1 Kobe", "Rogen", "Zhang Na", "Zhang Fang", "123", "Allen Lverson "," Bob Dylan "," Bob1 "," Bob2 "," 1nba "];
   var selecteditem = null;//define Global Variables
   var old_searchtext = null;
   var $autoComplete = $ (' <ul class= ' autoComplete ' ></ul> '). Hide (). InsertAfter (' #search_text ') ;
  //define function Get mouse display color
   var setselecteditem = function (item, eventkeycode) {
  & nbsp SelectedItem = Item;
    if (SelectedItem = = NULL | | $ (' ul[class= "autocomplete"] '). Find ("Li"). Length <= 0) {
     //No selected value removes the UL
     $ (' ul[class= ' AutoComplete "]). Empty (). Hide ();
     return false;
   }

if (SelectedItem < 0) {//Move up out of bounds
$autoComplete. Find ("Li"). Removeclass ("selected");
$ ("#search_text"). Val ($ ("#Result_text"). Val ());
SelectedItem = null;
return false;
}

if (SelectedItem >= $autoComplete. Find ("Li"). Length) {//Move down out of bounds
$autoComplete. Find ("Li"). Removeclass ("selected");
$ ("#search_text"). Val ($ ("#Result_text"). Val ());
SelectedItem = null;
return false;
}

Move the up and down keys to get text values
$ ("#search_text"). Val ($autoComplete. Find ("Li"). Removeclass ("selected"). EQ (SelectedItem). AddClass ("selected"). Text ());
$autoComplete. Show ();
};

Press ENTER to get the value, but cannot get ==> here instead direct commit
var Populatesearchfield = function () {
$ ("#search_text"). Val ($autoComplete. Find ("Li"). EQ (SelectedItem). text ());

Remove UL
$ (' ul[class= ' AutoComplete "]). Empty (). Hide ();
};

var Searchlabel = $ ("#search_title"). Remove (). text ();
$ ("#form1"). Submit (function () {
if ($ ("#search_text"). val () = = Searchlabel) {
$ ("#search_text"). Val (');
}
});

$ ("#search_text"). AddClass ("placeholder")
. Val (Searchlabel)
. focus (function () {
if (this.value = = Searchlabel) {
$ (this). Removeclass ("placeholder"). Val (');
}
})
. blur (function () {
if (This.value = = "") {
$ (this). AddClass ("placeholder"). Val (Searchlabel);
}
})
. attr ("AutoComplete", "off")///Close the auto-complete function with search_text text box (ie browser)
. KeyDown (function () {
Old_searchtext = $ (this). Val (); Get text value when pressed
})
. KeyUp (Function (event) {
var incomedescription = $ (this). Val (); Trigger when Key is released
No value directly returns, improves performance
if (incomedescription = = NULL | | Incomedescription.length <= 0) {
return false;
}

Code 40 and below for the special key (carriage return, direction, exit key, etc.), for the 8backspace key, 32 SPACEBAR, 13 return car
if (Event.keycode > | | event.keycode = = 8 | | event.keycode = = 32) {
SelectedItem = null; Empty each time you enter new data so that the drop-down list appears normal
Have data (can add a judge incomedescritption not empty to take the value)
$searchtextvalue =$ (' #Result_text '). Val (incomedescription);

if (jsondata.length) {
var objdata = Jquery.parsejson (Jsondata);
var objdata=jsondata;
Empty the previous record, or the drop-down list will repeat
$ (' ul[class= ' AutoComplete "]). empty ();
$.each (objdata, function (index, term) {
if (Term.indexof (incomedescription) >-1) {
$ (' <li></li> '). Text (term)
. AppendTo ($autoComplete)
. MouseOver (function () {
Setselecteditem (index, NULL);
})
. Click (function () {//Implement Select value to text box
$ ("#search_text"). Val (term);
$ (' ul[class= ' AutoComplete "]). Hide ();
});
}
});

$autoComplete. Show ()//Baidu By default does not select the first line
Setselecteditem (0);//The first row is selected by default, otherwise it is not displayed
} else {
No data, no display.
Setselecteditem (null, NULL);
}
} else if (Event.keycode = = 38) {
The user presses the UP ARROW key
if (SelectedItem = = null) {return false;}//Not selected
Setselecteditem (SelectedItem-1, 38);

} else if (Event.keycode = = 40) {
The user presses the DOWN ARROW key
if (SelectedItem = = null) {SelectedItem =-1;}//Select First row
Setselecteditem (SelectedItem + 1, 40);
}
})
. KeyPress (Function (event) {
if (Event.keycode = = && SelectedItem! = null) {
Populatesearchfield ();
Event.preventdefault ();
}
})
Lose focus closes the drop-down list because Blur is called before the Click event, so it is deferred so that when the Click event executes
. blur (Function (event) {
SetTimeout (function () {
Setselecteditem (NULL)
}, 250);
});

});
</script>

<body>
jquery imitation Baidu Auto Search: Provide search data (Zhang Sanli Zhang Fang 123 allenlverson Bobdylan bob1 bob2 1nba)
<br/>

<label id= "Search_title" >search the website</label>
<input type= "text" id= "Search_text" runat= "Server" ></input>
<input type= "hidden" id= "Result_text"/>
</body>

The functions implemented are as follows:

Imitation Baidu search engine automatically complete the function of the code, to achieve the same as Baidu search automatic completion function, hope to help new learning jquery friends, have the need for friends can download, master please more guidance,: http://download.csdn.net/detail/ javaquentin/8286573



Jquery imitation Baidu search engine auto-complete function