Home > Developer > Web Develop
This article describes the Imitation Baidu search box, when typing text into the input box, automatically pop up the suggestion option and match.
The effect is as follows:
OK, first of all, build an input box, huh?
1 <!DOCTYPE HTML>2 <HTML>3 <MetaCharSet= "Utf-8">4 <Head>5 <title>Auto Search</title>6 </Head>7 <Body>8Auto Search box<inputtype= "text"ID= "Input"onkeyup= "Find ()">9 <Divstyle= "Position:absolute;"ID= "Popup">Ten <TableID= "Table"Border= "0"cellspacing= "0"cellpadding= "0"> One <tbodyID= "Table_body"></tbody> A </Table> - </Div> - </Body> the </HTML>
The Find function is called when the input box has an input action. The Find function is primarily a search for corresponding related suggestions, the simplest way to do this: data items that contain input are the recommended items that are compliant.
The specific implementation is as follows:
1 functionfind () {2 3Inputfield = document.getElementById ("Input");4 5 for(vari = 0; i < data.length; i++) {6 if((Data[i]). IndexOf (Inputfield.value) >=0){7 Arr.push (Data[i]);8 }9 }Ten One set (arr); A}
Now comes the SET function, whose main function is to place the suggested items in the popup box one by two. The specific implementation is as follows:
1 functionSet (arr) {2 3 varSize =arr.length;4 setoffsets ();5 6 varrow, cell, Txtnode;7 for(vari = 0; i < size; i++) {8 varNextNode =Arr[i];9row = Document.createelement ("tr");TenCell = document.createelement ("TD"); One ACell.onmouseout =function() { This. Classname= ' MouseOver ';}; -Cell.onmouseover =function() { This. classname= ' MouseOut ';};//color changes when hovering or leaving options -Cell.setattribute ("bgcolor", "#FFFAFA"); theCell.setattribute ("Border", "0"); -Cell.onclick =function() {Populate ( This); } ;//mouse click Options to assign values to the input box - -Txtnode =document.createTextNode (nextnode); + Cell.appendchild (txtnode); - row.appendchild (cell); + tablebody.appendchild (row); A } at}
Two functions are also referenced here. Setoffsets mainly sets the position of the popup box. Populate is the value assigned to the input box when the mouse clicks the option.
The setoffsets is implemented as follows:
1 functionsetoffsets () {2 varEnd =Inputfield.offsetwidth;3 varleft =Calculateoffsetleft (Inputfield);4 vartop = Calculateoffsettop (Inputfield) +Inputfield.offsetheight;5 6CompleteDiv.style.border = "Black 1px solid";7CompleteDiv.style.left = left + "px";8CompleteDiv.style.top = top + "px";9Table.style.width = end + "px";Ten } One A functioncalculateoffsetleft (field) { - returnCalculateoffset (field, "Offsetleft"); - } the - functioncalculateoffsettop (field) { - returnCalculateoffset (field, "OffsetTop"); - } + - functioncalculateoffset (field, attr) { + varOffset = 0; A while(field) { atOffset + =field[attr]; -field =field.offsetparent; - } - returnoffset; -}
The populate is implemented as follows:
1 function Populate (cell) {// Click to assign a value to a text box 2 inputfield.value = Cell.firstChild.nodeValue; 3 clearnames (); 4 }
After assigning a value to the text box, you need to dismiss the suggestions in the pop-up box and call the clear function. The specific implementation is as follows:
1 functionClear () {2 if(tablebody) {3 varIND =TableBody.childNodes.length;4 for(vari = ind-1; I >= 0; i--) {5 Tablebody.removechild (Tablebody.childnodes[i]);6 }7CompleteDiv.style.border = "None";8 }9}
Ok, here JS function implementation is complete. The following sets the color change when the mouse slides over the suggested item:
1{2 background: #708090; 3 color: #FFFAFA; 4 }56{7 background: #FFFAFA; 8 color: #000000; 9 }
Another: If you want to search in Chinese, add a regular expression in the Find function to judge.
The end of this article.
Welcome everyone to communicate correct!
JS implementation automatic Cue box matching query
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
