在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的.
我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局.
界面的HTML结构, 第一个少不了的是一个搜索框, 第二个就是搜索的点击按钮.
<div> <input type="text" value=""> <button>搜索</button> </div>
这就是最简单的搜索框的设计. 那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; }
这时候我们继续往下考虑, 如果用户输入了关键词, 那就得显示一个列表的相关词语. 那这时候我们需要加入一个词语列表.
比如
<ul> <li><a href="#">武林外传</a> </li> <li><a href="#">葵花宝典</a> </li> <li><a href="#">如来佛掌</a> </li> <li><a href="#">九阴白骨爪</a> </li> </ul>
我们将这行代码追加到.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事件
var ele_key = document.getElementById("key"); ele_key.onkeyup = function (e) { //处理事件 }
这里我们模拟一个后台数据, 这里用数据来表示,然后加入一些数据
var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];
后台数据有了, 事件也添加了. 这时候我们对数据进行处理了.
首先是获取用输入的数据, 来然后与后台数据进行比较. 然后将比较后的数据保存在一个数据里面.
//定义一些数据 var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"]; var ele_key = document.getElementById("key"); ele_key.onkeyup = function (e) { var val = this.value; //获取输入框里匹配的数据 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]); } } }
继续往下分析, 目前我们获取到后台查询到的数据后, 那就得将这个数据显示给用户查看, 这里我们显示在数据列表中.
//定义一些数据 var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"]; var ele_key = document.getElementById("key"); ele_key.onkeyup = function (e) { var val = this.value; //获取输入框里匹配的数据 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]); } } //获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表,如果获取到的数据为空,则不显示 var ele_datalist = document.getElementById("datalist"); ele_datalist.style.visibility = "visible"; ele_datalist.innerHTML = ""; if (srdata.length == 0) { ele_datalist.style.visibility = "hidden"; } //将搜索到的数据追加到显示数据列表, 然后每一行加入点击事件, 点击后将数据放入搜索框内, 数据列表隐藏 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); } }