Automatically complete the javascript implementation in the search box.

Automatically complete the javascript implementation in the search box.

In many websites that need to be searched, there will be an automatically completed search box. users can search for the search term they want. help users quickly find the desired results. this method is friendly. therefore, it is strongly recommended.

We will achieve this effect this time. We will explain it through two articles. First, we will complete the design layout of the interface.

The HTML structure of the interface, the first is a search box, and the second is the click button of the search.

<Div class = "search"> <input type = "text" value = ""> <button> search </button> </div>

This is the simplest Search box design. how to handle the CSS code. in the past, float was used for processing, and a border was set for the search box. then, remove the border and set a background for the button. the flex layout is used here. this is easier. you do not need to clear the floating effect. of course, the compatibility issue should be considered here.

.search {  display: inline-flex;  height: 35px;  margin: 50px auto;  position: relative;}.search input {  border: #eee 1px solid;  background-color: #fff;  outline: none;  width: 200px;  padding: 0 5px;}.search button {  background-color: #ff3300;  color: #fff;  border: none;  width: 80px;}

At this time, we will continue to consider that if the user inputs a keyword, a list of related words will be displayed. At this time, we need to add a word list.
For example

<Ul> <li> <a href = "#"> Wulin rumor </a> </li> <a href = "#"> sunflower collection </a> </li> <a href = "#"> ruanfo palm </a> </li> <a href = "#"> jiuyin white claw </a> </li> </ul>

We append this line of code to the content of. search. Then we set the CSS code. We set its minimum width to. search width minus the width of the search button. This is as wide as the search box.

.search ul {  position: absolute;  left: 0;  top: 35px;  border: #eee 1px solid;  min-width: calc(100% - 80px);  text-align: left;}.search ul a {  display: block;  padding: 5px;}

Before the CSS code, clear some default browser styles. The final effect is as follows.

Okay. Now let's complete JavaScript code control.
Let's analyze the events. after entering text in the input box, the user queries the entered text and background data, returns it to the client, and then displays the returned data in the data list.

In this step, we first obtain the tag of the input box and add an onkeyup event to the tag.

Var ele_key = document. getElementById ("key"); ele_key.onkeyup = function (e) {// process events}

Here we simulate a background data, which is represented by data and then added some data.

Var data = ["programmers", "Wulin rumor", "sunflower Collection", "Nine Yin and white bone Claw", "Wulin ", "will"];

Background data is available and events are added. At this time, we have processed the data.
The first step is to obtain the input data and compare it with the background data. Then, save the compared data in a single data.

// Define some data var data = ["programmers", "Wulin rumor", "sunflower Collection", "Nine Yin and white bone Claw", "Wulin ", "will"]; var ele_key = document. getElementById ("key"); ele_key.onkeyup = function (e) {var val = this. value; // obtain the matched data in the input box var srdata = []; for (var I = 0; I <data. length; I ++) {console. log (data [I]. indexOf (val) if (val. trim (). length> 0 & data [I]. indexOf (val)>-1) {srdata. push (data [I]) ;}}

Continue to analyze the data. After we obtain the data queried in the background, we need to display the data to the user. Here we will display it in the data list.

// Define some data var data = ["programmers", "Wulin rumor", "sunflower Collection", "Nine Yin and white bone Claw", "Wulin ", "will"]; var ele_key = document. getElementById ("key"); ele_key.onkeyup = function (e) {var val = this. value; // obtain the matched data in the input box var srdata = []; for (var I = 0; I <data. length; I ++) {console. log (data [I]. indexOf (val) if (val. trim (). length> 0 & data [I]. indexOf (val)>-1) {srdata. push (data [I]) ;}// prepare to append the obtained data. The previous task is to clear the data and display the data list, if the obtained data is empty, var ele_datalist = document is not displayed. getElementById ("datalist"); ele_datalist.style.visibility = "visible"; ele_datalist.innerHTML = ""; if (srdata. length = 0) {ele_datalist.style.visibility = "hidden";} // append the searched data to the displayed data list, and add each row to the click event, click it and put the data in the search box. The data list hides var self = this; for (var I = 0; I <srdata. length; I ++) {var ele_li = document. createElement ("li"); var ele_a = document. createElement ("a"); ele_a.setAttribute ("href", "javascript:;"); ele_a.textContent = srdata [I]; ele_a.onclick = function () {self. value = this. textContent; ele_datalist.style.visibility = "hidden";} ele_li.appendChild (ele_a); ele_datalist.appendChild (ele_li );}}

When adding data to the list, we first initialize the data list to avoid repeated data addition. the second step is to add a click event to each row in the data list. Click the event and put the data in the search box to hide the data list.

Here the entire automatically completed search box is complete. Let's test the effect.

This may be a problem with the recording software. The border should be the same color as the recording background. The border is missing (⊙) B
The above is how JAVASCRIPT achieves the Automatic completion of the search box. You can test and play it on your own!

Articles you may be interested in:

• The text appears when the text in the javascript search box is deprecated.
• JS + CSS Implementation of Sina Weibo search box Imitation Method
• Implement up/down key switch control on the keyboard in the ecshop search box using javascript
• JS implementation of smart prompts like google and Baidu search boxes
• Implementation of the javascript search box Effect
• Javascript implementation is similar to the pop-up effect of Sina Weibo search box
• Js achieves the nice search box Effect of YouKu
• JavaScript code for keyword intelligent match in the search box