在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的.
我们这次就来实现这一效果. 我们通过这篇文章来进行讲解. 首先我们来完成界面的设计布局.
界面的HTML中当然少不了的是一个搜索框, 第二个就是搜索的点击按钮.下面是用来存储提示的一个列表。
<div class="search"> <input type="text" placeholder="请输入关键字" id="key" /> <button id="btn">搜索</button> <ul class="datalist" style="display: none;"> <li> <a href="javascript:void(0)" class="data">没有您搜所的结果</a> </li> </ul> </div>
对样式的控制,我只是对他进行了简单的设置,不喜欢的可以修改成自己喜欢的样式,
* { margin: 0; padding: 0; } .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; cursor: pointer; } .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; color: #333; text-decoration: none; }
对js的操作了。先分别引入jquery库和这次来进行操作的filter.js
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="../js/filter.js"></script>
下面就来介绍最重要的js代码部分了!首先我先对整体的js进行了一个小小的封装,为的是很方便的使用,
var inputSelect = { init: function(self) { var self = this; self.addEvent(self); },
创建了一个inputSelect对象,里面的init来进行简单的初始化。下面是代码最核心的部分:
这里我们模拟一个后台数据, 这里用数据来表示,然后加入一些数据,定义变量为datalist,
下面我们就需要对input框来进行操作了,首先先绑定keyup事件,【keyup:当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。】来获取他的value值。
在后面新创建一个空数组用来存贮匹配的数据;
addEvent: function(self) { var datalist = ["编程的人", "武林外传", "武林外传1", "武林外传2", "葵花宝典", "九阴白骨爪", "武林江湖", "will"], textval = $("#key"), textval.keyup(function(e) { var val = $(this).val(); //获得输入框的匹配内容,创建一个数组 var srdata = []; for(var i = 0; i < datalist.length; i++) { if(val.trim().length > 0 && datalist[i].indexOf(val) > -1) { srdata.push(datalist[i]); } }
我们通过trim()方法来判断当前的value值是否为空、indeOf()方法来检测是否有匹配的内容,如果要检索的字符串值没有出现,则该方法返回 -1。把匹配的添加到之前创建的空数组里面。
//获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表。
$(".datalist").empty(); //清空datalist,防止多次调用; dataitem = $(".datalist li").remove(); //获取li模板 //获取到的数据准备追加显示,判断数组里面的个数是否>0, if(srdata.length > 0) { for(var i = 0; i < srdata.length; i++) { var data = srdata[i]; var item = dataitem.clone(); item.find(".data").text(data); $(".datalist").append(item); } $(".datalist").show(); //对数据列表里面的每一行添加了点击事件,并且清空、隐藏数据列表 $(".datalist").on("click", ".data", function() { $("#key").val($(this).text()); $(".datalist").empty().hide(); }); } }); $(function() { inputSelect.init(); //对上面方法的调用 });
在添加数据到列表中时, 我们首先对数据列表做初始化处理,避免重复数据的添加. 其次就是我们给数据列表的每一行添加了一个点击事件,点击后将数据放入搜索框内, 数据列表隐藏.
在这里整个自动完成的搜索框就完成了.我们来测试下效果.