当前位置：网站首页>Write a search box with search tips

Write a search box with search tips

2022-07-24 04:23:00 【InfoQ】

This time, let's implement a system that can input content , The search box that displays the prompt drop-down box .

Search box function

Be able to enter all or part of the country name , The prompt drop-down box of the search box appears .

The specific data is not placed in the database , use JavaScript Wrote an array , Just look for the country names in this array

Implementation process

First write a HTML page , In the page input The search box is written , Not yet css To embellish

And then use css To embellish , The style here is written according to your preference , It doesn't even matter if you don't write

Writing JavaScript when , I use native JavaScript

Give all the country data first

var arr = [&quot; China &quot;,&quot; Japan &quot;,&quot; The United States &quot;,&quot; Russia &quot;,&quot; Canada &quot;,&quot; The British &quot;,&quot; Australia &quot;,&quot; Spain &quot;,&quot; Germany &quot;,&quot; Bombay plus &quot;,&quot; The Arab &quot;,&quot; India &quot;,&quot; Indonesia &quot;];

And then get input The input of the input box

var search = document.getElementsByClassName(&quot;blue-input&quot;)[0];
text Content  = search.value

I need to query the contents in the input box in real time , Once I enter something different , The content in the prompt box also changes immediately

So I use

DOM

Medium

oninput event

oninput Event triggered on user input .

The incident is

<input>

Triggered when the value of an element changes .

Tips ：

  This event is similar to onchange event . The difference is oninput Event triggered immediately when element value changes , onchange Triggered when an element loses focus . The other difference is onchange Events can also act on

and

Elements .

And then again

Focus on input There are sometimes drop-down lists in the search box ul

, Otherwise no , So I use

onfocus

and

onblur

To judge the entry and removal of focus

onblur Events occur when an object loses focus .

Onblur Often used for Javascript Verification code , Generally used in form input box .

onfocus Event occurs when the object gets focus .

Onfocus Usually used for

<input>

, and

<a>

Then enter the content in the search box , Use fuzzy query when matching data

function searchByIndexOf(keyWord, list){
 if(!(list instanceof Array)){ return ; }
 if(keyWord == &quot;&quot;){ return []; }else{
  var len = list.length;
  var arr = [];
  for(var i=0;i<len;i++){
  // If the string does not contain the target character, it returns -1
  if(list[i].indexOf(keyWord)>=0){
  arr.push(list[i]);
  }
  }
  return arr;
 }
}

page HTML Code ：

<!DOCTYPE html>
<html>
 <head>
 <meta charset=&quot;utf-8&quot; />
 <title></title>
 <link rel=&quot;stylesheet&quot; href=&quot;css/common.css&quot; /> 
 </head>
 <body>
 <div id=&quot;container&quot; class=&quot;center-justify&quot;>
 <div class=&quot;sea-container&quot;>
 <form action=&quot;&quot;>
 <input type=&quot;text&quot; name=&quot;search&quot; class=&quot;blue-input&quot; >

 <input type=&quot;submit&quot; value=&quot; Search for &quot; class=&quot;blue-button&quot;>
 </form>
 <p id=&quot;selectedId&quot;></p>
 </div>
 </div>
 <script src=&quot;js/sreach.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;></script>
 </body>
</html>