我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局.

界面的HTML结构, 第一个少不了的是一个搜索框, 第二个就是搜索的点击按钮.

 
 
 搜索
 

这就是最简单的搜索框的设计. 那CSS代码怎么处理. 以前用得多的是使用float来进行处理, 然后给搜索框一个边框,设置一个padding. 然后给按钮去除边框,设置一个背景. 这里我们使用flex布局方式. 这样更简便点. 不用考虑清除浮动效果.当然这里就要考虑兼容性问题了.

.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;
}

这时候我们继续往下考虑, 如果用户输入了关键词, 那就得显示一个列表的相关词语. 那这时候我们需要加入一个词语列表.
比如

 
武林外传 
 
葵花宝典 
 
如来佛掌 
 
九阴白骨爪 

我们将这行代码追加到.search的内容后面.然后设置CSS代码, 我们设置他的最小宽度为.search宽度减去搜索按钮的宽度.这样就跟搜索框一样宽.

.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;
}

这得在CSS代码之前, 将默认的一些浏览器样式清除.最后效果如下.

好了.下面我们完成JS的代码控制.
我们来分析下, 其中的事件. 用户在输入框输入文字后, 将输入的文字与后台数据做查询, 查询到后返回给客户端, 然后将返回的数据显示在数据列表下.

根据这个步骤, 我们首先是获取输入框标签, 给这个标签添加onkeyup事件

这里我们模拟一个后台数据, 这里用数据来表示,然后加入一些数据

后台数据有了, 事件也添加了. 这时候我们对数据进行处理了.
首先是获取用输入的数据, 来然后与后台数据进行比较. 然后将比较后的数据保存在一个数据里面.

继续往下分析, 目前我们获取到后台查询到的数据后, 那就得将这个数据显示给用户查看, 这里我们显示在数据列表中.

在添加数据到列表中时, 我们首先对数据列表做初始化处理,避免重复数据的添加. 其次就是我们给数据列表的每一行添加了一个点击事件,点击后将数据放入搜索框内, 数据列表隐藏.

在这里整个自动完成的搜索框就完成了.我们来测试下效果.

这里可能是录制软件问题, 边框与它录制的背景颜色应该一样了. 边框不见了(⊙﹏⊙)b