在很多需要搜索的网站中，都会有一个自动搜索框，方便用户找到自己想要的搜索词，帮助用户快速找到自己想要的结果。这种方法比较友好，建议使用。

我们这次会达到这个效果。我们将在两篇文章中解释。首先，我们将完成界面的设计和布局。

在界面的HTML结构中，第一个是搜索框，第二个是点击按钮进行搜索。

Class=' search '输入类型=' text '值=' button search/button/div这是搜索框最简单的设计。如何处理CSS代码？以前是用float处理，然后在搜索框上加边框，设置填充。然后移除按钮的边框。设置背景。这里我们使用flex布局。这更容易。没有必要考虑清除浮动效应。当然，这里要考虑兼容性。搜索{ display : inline-flex；height: 35pxmargin: 50px自动；相对位置：}.搜索输入{ border: # eee 1px solid背景-color : # fff；outline:无；宽度： 200 px；padding: 0 5px}.搜索按钮{ background-color : # ff 3300；color: # fffborder:无；宽度： 80px；}这时，我们继续思考。如果用户输入关键词，则必须显示相关单词的列表。这时，我们需要添加一个单词列表。例如：

Ul lia href='# '武林外传/a /li lia href='# '向日葵收藏/a /li lia href='# '如来掌/a /li lia href='# '九阴白骨爪/a /li/ul我们将在的内容中追加这一行代码。搜索。然后设置CSS代码，我们将它的最小宽度设置为。搜索ul { position: absoluteleft : 0；top: 35pxborder: #eee 1px固体；最小宽度： calc(100%-80px)；文本-左对齐：}.搜索ul a { display:块；padding: 5px}在CSS代码之前，有必要清除一些默认的浏览器样式。最终效果如下。

好了，我们来完成JS的代码控制。我们来分析一下事件。用户在输入框中输入文本后，会查询输入的文本和后台数据，查询后返回给客户端，然后在数据列表下显示返回的数据。

按照这个步骤，我们首先获取输入框的标签，并在这个标签上添加onkeyup事件。

var ele _ key=document . getelementbyid(' key ')；ele _ key . onkeyup=function(e){//handle events }这里我们模拟一个后台数据，用数据来表示，然后添加一些数据。

Var数据=[《程序员》，《武林外传》，《葵花集》，《九阴白骨爪》，《武林江湖》，《会》]；有了背景数据，事件就被添加了。这时，我们处理了数据。首先，我们获得输入数据，然后将其与背景数据进行比较。然后，我们将比较的数据保存在一个数据中。

//定义一些数据var data=[《程序员》《武林外传》《葵花集》《九阴白骨爪》《武林江湖》《会》]；var ele _ key=document . getelementbyid(' key ')；ele _ key . onkeyup=function(e){ var val=this . value；//获取输入框中的匹配数据var srdata=[]；for(var I=0；一.数据.长度；i ) { console.log(数据[i])。indexOf(val)) if (val.trim()。长度0数据[i]。index of(val)-1){ Sr data . push(data[I])；}}}继续分析。目前我们在后台得到查询的数据后，还要把数据展示给用户查看。这里我们在数据列表中显示它。

//定义一些数据var data=[《程序员》《武林外传》《葵花集》《九阴白骨爪》《武林江湖》《会》]；var ele _ key=document . getelementbyid(' key ')；ele _ key . onkeyup=function(e){ var val=this . value；//获取输入框中的匹配数据var srdata=[]；for(var I=0；一.数据.长度；i ) { console.log(数据[i])。indexOf(val)) if (val.trim()。长度0数据[i]。index of(val)-1){ Sr data . push(data[I])；} }//获取的数据已准备好进行附加显示。数据要在前期：清空，然后显示数据列表。如果获取的数据为空，将不会显示varele _ datalist=document . getelementbyid(' datalist ')。ele _ datalist . style . visibility=' visible '；ele _ datalist.innerHTML=if(Sr data . length==0){ ele _ datalist . style . visibility=' hidden '；}//将搜索到的数据追加到显示数据列表中，然后在每行添加一个click事件。点击后，将数据放入搜索框，在数据列表中隐藏var self=thisfor(var I=0；i srdata.lengthI){ var ele _ Li=document . create element(' Li ')；var ele _ a=document . create element(' a ')；ele_a.setAttribute('href '，' javascript:');ele _ a . TextContent=Sr data[I]；ele _ a . onclick=function(){ self . value=this . text content；ele _ datalist . style . visibility=' hidden '；} ele _ Li . appendchild(ele _ a)；ele _ datalist . appendchild(ele _ Li)；}}在列表中添加数据时，我们首先初始化数据列表，避免添加重复数据。其次，我们在数据列表的每一行添加一个click事件，然后将数据放入搜索框，这样就隐藏了数据列表。

这里，整个自动搜索框就完成了。我们来测试一下效果。

录音软件可能有问题。框架的颜色应该与其记录的背景相同。框架不见了( ﹏ ﹏)b. B以上是JAVASCRIPT在搜索框中的自动完成效果。可以自己测试玩！