javaScript搜索自动提示功能

在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的.
我们这次就来实现这一效果. 我们通过这篇文章来进行讲解. 首先我们来完成界面的设计布局.

 界面的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(); //对上面方法的调用
});

 

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

 

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