在使用百度搜索是,页面会根据我们输入的内容自动匹配一些候选内容。
实现的主要过程主要是:
1、用户在输入一个字符结束后,在onkeyup事件中获取用户输入的内容。
2、根据获取到的内容向服务器发送请求,匹配到相似的数据,存到数组中。
3、判断数组是否有内容,如果有数据,就在搜索框下面遍历匹配到的内容(候选项)。
首先,要写好页面布局
html部分
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>模拟百度搜索框</title> <meta charset="utf-8" /> <style> fieldset, img, input, button { border: none; padding: 0; margin: 0; outline-style: none; } ul, ol { list-style: none; margin: 0px; padding: 0px; } #box { width: 405px; margin: 200px auto; position: relative; } #txtSearch { float: left; width: 300px; height: 32px; padding-left: 4px; border: 1px solid #b6b6b6; border-right: 0; } #btnSearch { float: left; width: 100px; height: 34px; font: 400 14px/34px "microsoft yahei"; color: white; background: #3385ff; cursor: pointer; } #btnSearch:hover { background: #317ef3; } #pop { width: 303px; border: 1px solid #ccc; padding: 0px; position: absolute; top: 34px; } #pop ul li { padding-left: 5px; } #pop ul li:hover { background-color: #CCC; } </style> </head> <body> <div id="box"> <input type="text" id="txtSearch"> <input type="button" value="百度一下" id="btnSearch"> <!-- <div id="pop"> <ul> <li>候选1</li> <li>候选2</li> <li>候选3</li> <li>候选4</li> </ul> </div> --> </div> </body> </html>
js部分
这里我们假设已经从服务端获取到了数据
//从服务端获取到的数据 var datas = ["a", "abc", "abbbb", "abxxxx", "xyz", "abcdef", "abzzzz"]; var box = document.getElementById("box"); var txtSearch = document.getElementById("txtSearch"); txtSearch.onkeyup = function () { //这是数组是用来存储匹配到的数据,用来展示到列表里 var arr = new Array(); for (var i = 0; i < datas.length; i++) { if (datas[i].indexOf(this.value) >= 0) { arr.push(datas[i]); } } //如果有了pop,就把pop删了 if (document.getElementById("pop")) { box.removeChild(document.getElementById("pop")); } //如果没有内容,什么也不做 注意:这是在删除pop之后判断,因为输入框没有内容匹配到的就是全部数据,列表中展示的就是全部数据 if (this.value.length <= 0) { return; } //把匹配到数据放到列表里 if (arr.length > 0) { var div = document.createElement("div"); div.id = "pop"; var ul = document.createElement("ul"); div.appendChild(ul); for (var i = 0; i < arr.length; i++) { var li = document.createElement("li"); li.innerHTML = arr[i]; ul.appendChild(li); } box.appendChild(div); } }