Native JS simulation Baidu search box

Recently, a new small partner has been asking some basic knowledge, suddenly feel that people's memory is limited, some of the commonly used knowledge is very simple but also very easy to blur, or a word, or a grammar. So think about it should use the debris time of the work, record some work problems and some interesting small cases, and then opened a podcast, on the one hand to facilitate their own later, on the one hand to learn the small partner a reference.

Today, write a simple small case: Native JS simulation Baidu search box.

Demand:

1. When the input box is entered, each input text will be shown below the relevant content list

2. Each time the input box is entered, the last content is emptied

3. When the mouse moves into the contents of the list, the corresponding content is highlighted and returned to the original state when moved out.

4. When the mouse clicks on the contents of the list, the list content is displayed to the text box, and the list is emptied

HTML page Structure section

1 <!--The page is just a simple text box and button that shows the content with a UL list at the bottom of the text box -2 <Divclass= "box">3     <Divclass= "Top">4         <inputtype= "text"ID= "txt"/><inputtype= "button"value= "Baidu a bit"ID= "Search"/>5     </Div>6     <ulID= "keywords"></ul>7 </Div>

CSS Styles Section

1 <style>2         * {3 margin:0;4 padding:0;5}6 Body{7 font-size:20px;8}9 . Box{Ten width:600px; One Height:40px; A margin:200px Auto;/*Large Box Page Center*/ - position:relative; -} the . Top{ - width:605px; - Height:40px; -} + #txt{ - width:490px; + Height:38px; A Border:1px solid #CCCCCC; at font-size:18px; - float: Left; - Padding-left:8px; - Outline:None;/*Remove the default style when the text box gets focus*/ -} - #txt: Focus{ in Border:1px solid #3385FF; -} to #search{ + width:100px; - Height:40px; the float: Left; * Background-color:#3385FF; $ Color: White;Panax Notoginseng Border:None; - font-size:16px; the} + #keywords{ A position:Absolute;/*ul relative to parent box positioning*/ the Top:40px; +  Left:0; - Border:1px solid #CCCCCC; $ Border-top:None; $ List-style:None;/*Remove the small dots that come with the unordered list default*/ - width:498px; - Display:None;/*Hide the UL, when the relevant content is displayed again, so that before the search, the page only a search box and button*/ the} - Li{Wuyi Line-height:24px; the font-size:16px; - Padding-left:8px; Wu} - </style>

JS Behavior Section

1<script>2     //defines an array that stores related content, simulates the data obtained in the background, and each element of the array is a string3     varkeywords = ["Jay Chou", "Jay new album", "Jay Chou waiting For You Class", "Eason Chan", "Eason Chan Concert", "Eason Chan Singer",4"Eason Chan Faye Wong", "front-end", "front-end development", "front-end to give up", "front-end to learn what", "Chow Yun-Fat", "Chow Yun-fat gambling God", "Chow Yun-Fat Macau", "weekend double Hugh is the state regulations", "Super Junior",5"JavaScript", "Java", "Super Junior member", "Super Junior member Strong Benevolence", "Super Junior member Jin Yingyun", "A Short Journey"];6 7     //get text boxes, buttons, and lists8     varTxt=document.getelementbyid ("TXT");9     varSearch=document.getelementbyid ("Search");Ten     varKw=document.getelementbyid ("keywords"); One  A     //Register a keyboard pop-up event for a text box, and after each press of a key, the function executes again -txt.onkeyup=function () { -Kw.innerhtml= "";//The list is emptied before each match, and if not emptied, the contents of each fetch are superimposed on the list . the  -         if( This. Value) {//data match and display in text box with input content -              for(vari=0;i<keywords.length;i++) {//iterate through all the contents of the array -                 if(Keywords[i].indexof ( This. Value)!=-1) {//if the character or string entered by the text box matches the string of the array element, an Li tag is created, showing the element of the array as the content of the Li tag. +                     varLi=document.createelement ("Li");  -Li.innerhtml=Keywords[i]; +kw.style.display= "Block"; A Kw.appendchild (LI); at                      -                     //register a mouse move-in and move-out event for each of the newly created Li tags -Li.onmouseover=function () { -                          This. defaultcolor= This. Style.backgroundcolor;//define a DefaultColor property to store the background color of the Li label -                          This. style.backgroundcolor= "#F1F1F1"; -                     }; in  -li.onmouseout=function () { to                          This. style.backgroundcolor= This. DefaultColor; +                     }; -                     //register a Click event for each of the newly created Li tags theli.onclick=function () { *Txt.value= This. InnerHTML;//display the clicked list content to a text box $                     };Panax Notoginseng                 } -             } the         } +     }; A    //register a Click event for the entire HTML, empty the list and hide the list thedocument.documentelement.onclick=function () { +Kw.innerhtml= ""; -Kw.style.display= "None";  $     } $</script>

Operating effect:

This completes a use of the original JS simulation Baidu search Box small case, the following will be sorted out some simple common small cases, will also record some of their work encountered some problems, the first write Bo, welcome correction

Native JS simulation Baidu search box