Auto-Completed search box JavaScript implements _javascript techniques

In many sites that need to be searched, there will be a search box that is automatically completed. Make it easy for users to find the search terms they want. Help users quickly find the results they want. This way is more friendly. So it is more advocated to use.

We're going to make this happen this time. We are going through two articles to explain. First, we will finish the design layout of the interface.

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

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

This is the simplest design of the search box. That CSS code how to deal with. A lot of it used to be handled using float, and then to a border of the search box, set a padding. Then remove the border from the button and set a background. Here we use the Flex layout method. It's a little more convenient. Do not worry about clearing the floating effect. Of course this is about compatibility issues.

. 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 point we continue to consider that if the user entered the keyword, it will have to display a list of related words. That's when we need to add a list of words.
Like what

<ul>
  <li><a href= "#" > Martial arts </a> </li>
  <li><a href= "#" > Sunflower Treasure </a > </li>
  <li><a href= "#" > Buddha palm </a> </li>
  <li><a href= "#" > Nine Yin Bones Claw </a> </li>
</ul>

We append this line of code to the contents of the. Search. Then set the CSS code, and we set his 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;
}

This has to be done before CSS code to remove some of the default browser styles. The final effect is as follows.

All right, let's do the code control for JS below.
Let's analyze the events in the next one. After the user enters the text in the input box, the input text and background data are queried, the query is returned to the client, and then the returned data is displayed under the data list.

According to this step, we first get the input box label and add the onkeyup event to the tag.

 var Ele_key = document.getElementById ("key");
 Ele_key.onkeyup = function (e) {
   //handling event
 }

Here we simulate a background data, represented here with data, and then add some data

var data = ["Programmer", "Martial arts", "Sunflower Treasure", "Nine Yin Bones Claw", "Martial arts and lakes", "would"];

Background data is available, and events have been added. That's when we're dealing with the data.
The first is to get the input data and then compare it to the background data. The data is then stored in a single data.

Define some data
var: ["Programmer", "Martial arts", "Sunflower Treasure", "Nine Yin Bones Claw", "Martial arts and lakes", "would"];
var Ele_key = document.getElementById ("key");
Ele_key.onkeyup = function (e) {

  var val = this.value;

  Gets the matching 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 && Amp Data[i].indexof (val) >-1) {
       Srdata.push (data[i]);}}

 

Continue to analyze, now we get to the background query to the data, then we have to display this data to the user to see, here we display in the list of data.

Define some data var: ["Programmer", "Martial arts", "Sunflower Treasure", "Nine Yin Bones Claw", "Martial arts and lakes", "would"];
var Ele_key = document.getElementById ("key");

  Ele_key.onkeyup = function (e) {var val = this.value;
  Gets the matching 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 &&am P
    Data[i].indexof (val) >-1) {Srdata.push (data[i]);
  }//Get the data to be appended to the display, the early things to do: Empty the data, and then display a list of data, if the obtained data is empty, then do not display var ele_datalist = document.getElementById ("DataList");
  ele_datalist.style.visibility = "visible";

  ele_datalist.innerhtml = "";
  if (Srdata.length = = 0) {ele_datalist.style.visibility = "hidden";
  ///Append the search data to the list of displayed data, then add the click event to each row, click the data into the search box, and the data list hides the 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 a list, we first initialize the list of data to avoid the addition of duplicate data. The second is that we add a click event to each row of the data list, click on the data to put it in the search box, and the list of data is hidden.

Here the entire Auto-complete search box is complete. Let's test the effect.

This may be a recording of a software problem, and the border should be the same as the background color it is recording. The border is missing (⊙﹏⊙) b
The above is JavaScript to achieve the automatic search box completion effect, we can test their own play!