内容简介
本文介绍利用JQ实现输入内容过滤搜索数据功能（焦点过滤、空全部显示和模糊过滤等），效果如下：
实现过程
html、css和逻辑代码都有详细的注释，可自行参考。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{padding:0;margin:0;}
.search-box{width:300px;margin:30px;}
.search-box .inputSearch{border:1px solid #f2f2f2;padding:10px 15px;width:300px;box-sizing: border-box;}
.search-result{width:100%;background-color: #fff;box-shadow: 0px 3px 20px 0px rgba(13, 40, 80, 0.13);box-sizing: border-box;text-align: left;display:none;}
.search-result .result-box li{height:34px;line-height: 34px;cursor: pointer;padding:0 15px;list-style: none;}
.search-result .result-box li:hover{background-color: #f0f3f6;color: #5494df;}
</style>
</head>
<body>
<div class="search-box">
<input type="text" placeholder="请输入搜索关键字" class="inputSearch" />
<div class="search-result">
<ul class="result-box">
</ul>
</div>
</div>
</body>
<script src="./js/jquery-1.11.1.min.js"></script>
<script>
var list = [{
"name": "晗宝SVANA的小店",
"mongodbID": "611472d6d5a87b1e26ff21c0"
},
{
"name": "晗宝SVANA的小店1",
"mongodbID": "61147536d5a87b1e26ff21c8"
},
{
"name": "晗宝SVANA的小店2",
"mongodbID": "6114875dd5a87b1e26ff21d4"
},
{
"name": "晗宝SVANA的小店3",
"mongodbID": "6108f131d5a8a8763698f74b"
},
{
"name": "晗宝SVANA的小店4",
"mongodbID": "6109f28cd5a8a8763698f75d"
},
{
"name": "晗宝",
"mongodbID": "6109f28cd5a8a8763698f75d"
},
{
"name": "SVANA的小店",
"mongodbID": "6109f28cd5a8a8763698f75d"
}
];
$(function() {
// 输入框触发焦点
$(".inputSearch").focus(function(event) {
searchData(event);
});
// 键盘输入触发
$(".inputSearch").keyup(function(event) {
searchData(event);
});
// 点击数据列表
$(".search-result .result-box").on('click', 'li', function(event) {
event.preventDefault();
var id = event.currentTarget.dataset.id;
$(".inputSearch").val($(this).text());
$('.search-result').css('display', 'none');
});
});
// 搜索函数
function searchData(event) {
// 获取值
var str = $(".inputSearch").val();
// 去空格
str = str.replace(/\s+/g, "");
// 如果是enter键、上下键返回
if (event.keyCode == 13 || event.keyCode == 38 || event.keyCode == 40) {
return false;
}
if (str == '') { // 空搜索显示全部数据
renderData(list);
} else {
var reg = new RegExp(str, 'ig')
var newArr = list.filter(function(obj, index, array) {
return obj.name.match(reg);
});
if (newArr == 0) { // 输入数据不匹配
$('.search-result').css('display', 'none');
return false;
}
renderData(newArr); // 显示过滤数据
}
}
// 渲染搜索列表数据
function renderData(arr) {
$('.search-result').css('display', 'block');
var resultHtml = '';
$.each(arr, function(index, val) {
resultHtml += '<li data-id=' + val.mongodbID + '>' + val.name + '</li>'
});
$(".search-result .result-box").html(resultHtml);
}
</script>
</html>
