Like Baidu auto-complete jquery, like Baidu auto-complete jquery
The newly created index.html file directly copies the following code to the newly created file index.html and accesses it using a browser. It is only used for reference:
<! Doctype html>
<Html>
<Meta charset = "UTF-8">
<Style>
Body {
Margin-left: 0px;
Margin-top: 0px;
Margin-right: 0px;
Margin-bottom: 0px;
}
. Auto_hidden {
Width: 204px; border-top: 1px solid #333;
Border-bottom: 1px solid #333;
Border-left: 1px solid #333;
Border-right: 1px solid #333;
Position: absolute;
Display: none;
}
. Auto_show {
Width: 204px;
Border-top: 1px solid #333;
Border-bottom: 1px solid #333;
Border-left: 1px solid #333;
Border-right: 1px solid #333;
Position: absolute;
Z-index: 9999;/* set the cascade order of objects */
Display: block;
}
. Auto_onmouseover {
Color: # ffffff;
Background-color: highlight;
Width: 100%;
}
. Auto_onmouseout {
Color: #000000;
Width: 100%;
Background-color: # ffffff;
}
</Style>
<Script language = "javascript">
<! --
Var $ = function (id ){
Return "string" = typeof id? Document. getElementById (id): id;
}
Var Bind = function (object, fun ){
Return function (){
Return fun. apply (object, arguments );
}
}
Function AutoComplete (obj, autoObj, arr ){
This. obj = $ (obj); // input box
This. autoObj = $ (autoObj); // The root node of the DIV
This. value_arr = arr; // do not include duplicate values
This. index =-1; // the index of the currently selected DIV
This. search_value = ""; // Save the currently searched characters
}
AutoComplete. prototype = {
// Initialize the position of the DIV
Init: function (){
This. autoObj. style. left = this. obj. offsetLeft + "px ";
This. autoObj. style. top = this. obj. offsetTop + this. obj. offsetHeight + "px ";
This. autoObj. style. width = this. obj. offsetWidth-2 + "px"; // subtract the border length 2px
},
// Delete all required DIV
DeleteDIV: function (){
While (this. autoObj. hasChildNodes ()){
This. autoObj. removeChild (this. autoObj. firstChild );
}
This. autoObj. className = "auto_hidden ";
},
// Set the value
SetValue: function (_ this ){
Return function (){
_ This. obj. value = this. seq;
_ This. autoObj. className = "auto_hidden ";
}
},
// When the mouse is moved to the DIV, The DIV is highlighted.
AutoOnmouseover: function (_ this, _ div_index ){
Return function (){
_ This. index = _ div_index;
Var length = _ this. autoObj. children. length;
For (var j = 0; j <length; j ++ ){
If (j! = _ This. index ){
_ This. autoObj. childNodes [j]. className = 'Auto _ onmouseout ';
} Else {
_ This. autoObj. childNodes [j]. className = 'Auto _ onmouseover ';
}
}
}
},
// Change the classname
ChangeClassname: function (length ){
For (var I = 0; I <length; I ++ ){
If (I! = This. index ){
This. autoObj. childNodes [I]. className = 'Auto _ onmouseout ';
} Else {
This. autoObj. childNodes [I]. className = 'Auto _ onmouseover ';
This. obj. value = this. autoObj. childNodes [I]. seq;
}
}
}
,
// Response keyboard
PressKey: function (event ){
Var length = this. autoObj. children. length;
// The cursor key "yellow"
If (event. keyCode = 40 ){
++ This. index;
If (this. index> length ){
This. index = 0;
} Else if (this. index = length ){
This. obj. value = this. search_value;
}
This. changeClassname (length );
}
// The cursor key "yellow"
Else if (event. keyCode = 38 ){
This. index --;
If (this. index <-1 ){
This. index = length-1;
} Else if (this. index =-1 ){
This. obj. value = this. search_value;
}
This. changeClassname (length );
}
// Enter the Enter key
Else if (event. keyCode = 13 ){
This. autoObj. className = "auto_hidden ";
This. index =-1;
} Else {
This. index =-1;
}
},
// Program entry
Start: function (event ){
If (event. keyCode! = 13 & event. keyCode! = 38 & event. keyCode! = 40 ){
This. init ();
This. deleteDIV ();
This. search_value = this. obj. value;
Var valueArr = this. value_arr;
ValueArr. sort ();
If (this. obj. value. replace (/(^ \ s *) | (\ s * $)/g, '') =" ") {return;} // The value is null and exits.
Try {var reg = new RegExp ("(" + this. obj. value + ")", "I ");}
Catch (e) {return ;}
Var div_index = 0; // record the created DIV Index
For (var I = 0; I <valueArr. length; I ++ ){
If (reg. test (valueArr [I]) {
Var div = document. createElement ("div ");
Div. className = "auto_onmouseout ";
Div. seq = valueArr [I];
Div. onclick = this. setValue (this );
Div. onmouseover = this. autoOnmouseover (this, div_index );
Div. innerHTML = valueArr [I]. replace (reg, "<strong> $1 </strong>"); // search for bold characters
This. autoObj. appendChild (div );
This. autoObj. className = "auto_show ";
Div_index ++;
}
}
}
This. pressKey (event );
Window. onresize = Bind (this, function () {this. init ();});
}
}
// -->
</Script>
<Body>
<Div align = "center" style = "padding-top: 50px">
<Input type = "text" style = "width: 300px; height: 20px; font-size: 14pt; "placeholder =" enter a or B simulated effect "id =" o "onkeyup =" autoComplete. start (event) ">
</Div>
<Div class = "auto_hidden" id = "auto"> <! -- Automatically complete DIV --> </div>
<Script>
Var autoComplete = new AutoComplete ('O', 'auto', ['b0', 'b12 ', 'b22', 'b3', 'b4', 'b5 ', 'b6 ', 'b7', 'b8', 'b2', 'abd', 'AB', 'acd', 'accd', 'b1 ', 'cd ', 'cct', 'cbcv ', 'cxf']);
</Script>
</Body>
</Html>
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
