Home > Developer > Web Develop
Jquery automatically performs functions like Baidu search engine, and jquery Baidu search engine
The source code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> example of Automatic completion </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>
</Head>
<Script type = "text/javascript">
// Implement the same functions as Baidu
$ (Document). ready (function (e ){
// Bug: the problem that Chinese characters cannot be queried and the value must appear when null values exist.
Var jsonData = ["Zhang San", "Li Si", "1 Kobe", "Luo Jin", "Zhang Na", "Zhang Fang", "123", "allen lverson ", "bob dylan", "bob1", "bob2", "1nba"];
Var selectedItem = null; // defines the global variable
Var old_searchtext = null;
Var $ autoComplete = $ ('<ul class = "autocomplete"> </ul>'). hide (). insertAfter ('# search_text ');
// Define the function to obtain the mouse color
Var setSelectedItem = function (item, eventKeyCode ){
SelectedItem = item;
If (selectedItem = null | $ ('ul [class = "autocomplete"] '). find ("li"). length <= 0 ){
// Remove ul if no value is selected
$ ('Ul [class = "autocomplete"] '). empty (). hide ();
Return false;
}
If (selectedItem <0) {// remove from Bounds
$ AutoComplete. find ("li"). removeClass ("selected ");
$ ("# Search_text"). val ($ ("# Result_text"). val ());
SelectedItem = null;
Return false;
}
If (selectedItem >=$ autoComplete. find ("li"). length) {// moves down the border
$ AutoComplete. find ("li"). removeClass ("selected ");
$ ("# Search_text"). val ($ ("# Result_text"). val ());
SelectedItem = null;
Return false;
}
// Move the up/down key to obtain the text value
$ ("# Search_text "). val ($ autoComplete. find ("li "). removeClass ("selected "). eq (selectedItem ). addClass ("selected "). text ());
$ AutoComplete. show ();
};
// Press the Enter key to obtain the value, but cannot obtain => here you can directly submit
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") // disable the Automatic completion function provided by the search_text text box (that is, the browser ).
. Keydown (function (){
Old_searchtext = $ (this). val (); // obtain the text value when you press
})
. Keyup (function (event ){
Var InComeDescription = $ (this). val (); // triggered when the button is released
// No value is returned directly to improve performance
If (InComeDescription = null | InComeDescription. length <= 0 ){
Return false;
}
// Special keys (enter key, direction, Return key, etc.) with codes of 40 or lower, 8 backspace key, 32 Space key, and 13 carriage return key)
If (event. keyCode> 40 | event. keyCode = 8 | event. keyCode = 32 ){
SelectedItem = null; // empty each time new data is input to make the drop-down list display normal
// Data available (you can add a value to judge whether InComeDescritption is not empty)
$ Searchtextvalue = $ ('# Result_text'). val (InComeDescription );
If (jsonData. length ){
// Var objData = jQuery. parseJSON (jsonData );
Var objData = jsonData;
// Clear the previous records first, or the drop-down list will be repeated.
$ ('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 () {// select the value to the text box
$ ("# Search_text"). val (term );
$ ('Ul [class = "autocomplete"] '). hide ();
});
}
});
$ AutoComplete. show (); // press Baidu to select the first line by default
// SetSelectedItem (0); // The first row is selected by default. Otherwise, it is not displayed.
} Else {
// No data is displayed
SetSelectedItem (null, null );
}
} Else if (event. keyCode = 38 ){
// The user presses the arrow key
If (selectedItem = null) {return false;} // No
SetSelectedItem (selectedItem-1, 38 );
} Else if (event. keyCode = 40 ){
// The user presses the downward direction key.
If (selectedItem = null) {selectedItem =-1;} // select the first row
SetSelectedItem (selectedItem + 1, 40 );
}
})
. Keypress (function (event ){
If (event. keyCode = 13 & selectedItem! = Null ){
PopulateSearchField ();
Event. preventDefault ();
}
})
// Close the drop-down list without focus. Because blur is called before the click event, it is delayed so that it can be executed when the click event is executed.
. Blur (function (event ){
SetTimeout (function (){
SetSelectedItem (null)
},250 );
});
});
</Script>
<Body>
Jquery is similar to Baidu's automatic search: it provides search data (Michael Lee, Mike, Kobe, Zhang Na, 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>
</Html>
Shows the implemented functions:
Similar to the baidu search engine's Automatic completion function, the code is implemented to achieve the same Automatic completion function as the hundred-degree search. We hope to help new Jquery learners and download them if needed, master please give more guidance,: http://download.csdn.net/detail/javaquentin/8286573
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
