模糊搜索功能在工作中应用广泛，并且很实用，自己写了一个方法，以后用到的时候可以直接拿来用了！
实现的搜索功能：
1. 可以匹配输入的字符串找出列表中匹配的项，列表框的高度跟随搜索出的列表项的多少改变
2. 可以点击某一项进行选中列表项
3. 可以按下上、下、回车键来控制列表项
4. 按下回车键时则会选中列表项
5. 点击文本框中的下拉键头时会切换下拉框的显示/隐藏
6. 点击文本框外部时自动隐藏下拉框
先来预览一下效果吧！
列表中包含的列表项有：
北京、上海、杭州、安庆、大兴安岭、安阳、广州、贵阳、哈尔滨、合肥、邯郸、呼伦贝尔、淮南、黄山、济南、济宁、嘉兴、南昌、南通、南宁、南京
在预览时需要输入匹配以上项目的文字，以便更好的预览效果
点击链接预览模糊搜索功能
http://sandbox.runjs.cn/show/kwxlptbl
下面就开始实现功能啦！
一、首先，引入jquery文件
<script type="text/javascript" src="js/jquery/jquery-3.2.1.min.js"></script>
二、html部分
<div id="container"> <h2>模糊搜索</h2> <div id="cityContainer" class="selectContainer"> <label>城市：</label> <input type="text" placeholder="请输入城市名称" list="cityList" class="selectInput" name="cityName" id="cityName" value="" onfocus="fuzzySearch.call(this)" /> <div class="picture_click dropDowns" style=""></div> <div id="cityList" class="selectList"> <div id="001">北京</div> <div id="002">上海</div> <div id="003">杭州</div> <div id="004">安庆</div> <div id="005">大兴安岭</div> <div id="006">安阳</div> <div id="007">广州</div> <div id="008">贵阳</div> <div id="009">哈尔滨</div> <div id="010">合肥</div> <div id="011">邯郸</div> <div id="012">呼伦贝尔</div> <div id="013">淮南</div> <div id="014">黄山</div> <div id="015">济南</div> <div id="016">济宁</div> <div id="017">嘉兴</div> <div id="018">南昌</div> <div id="019">南通</div> <div id="020">南宁</div> <div id="021">南京</div> </div> </div> </div>
三、编写样式
<style type="text/css"> * { padding: 0; margin: 0; } h2 { margin-bottom: 20px; } #container { width: 500px; text-align: center; margin: 0 auto; font-family: "微软雅黑"; margin-top: 50px; } .selectContainer { position: relative; } .selectInput { width: 200px; height: 25px; border-style: none; border: 1px solid #999; border-radius: 3px; padding: 0 3px; } .picture_click { background: url(img/select-default.png) no-repeat; opacity: 1; width: 15px; height: 8px; position: absolute; top: 10px; right: 125px; } .picture_click:hover { background-image: url(img/select-hover.png); } .selectList { width: 206px; height: 212px; overflow-y: scroll; text-align: left; margin: 0 172px; border: 1px solid #999; display: none; position: relative; } .selectList div { cursor: pointer; } </style>
此时的页面：
四、使用js、jquery实现模糊搜索功能
<script type="text/javascript">
//初始化下拉框
initSearchInput();
function fuzzySearch(e) {
var that = this;
//获取列表的ID
var listId = $(this).attr("list");
//列表
var list = $('#' + listId + ' div');
//列表项数组 包列表项的id、内容、元素
var listArr = [];
//遍历列表，将列表信息存入listArr中
$.each(list, function(index, item){
var obj = {'eleId': item.getAttribute('id'), 'eleName': item.innerHTML, 'ele': item};
listArr.push(obj);
})
//current用来记录当前元素的索引值
var current = 0;
//showList为列表中和所输入的字符串匹配的项
var showList = [];
//为文本框绑定键盘引起事件
$(this).keyup(function(e){
//如果输入空格自动删除
this.value=this.value.replace(' ','');
//列表框显示
$('#' + listId).show();
if(e.keyCode == 38) {
//up
console.log('up');
current --;
if(current <= 0) {
current = 0;
}
console.log(current);
}else if(e.keyCode == 40) {
//down
console.log('down');
current ++;
if(current >= showList.length) {
current = showList.length -1;
}
console.log(current);
}else if(e.keyCode == 13) {
//enter
console.log('enter');
//如果按下回车，将此列表项的内容填充到文本框中
$(that).val(showList[current].innerHTML);
//下拉框隐藏
$('#' + listId).hide();
}else {
//other
console.log('other');
//文本框中输入的字符串
var searchVal = $(that).val();
showList = [];
//将和所输入的字符串匹配的项存入showList
//将匹配项显示，不匹配项隐藏
$.each(listArr, function(index, item){
if(item.eleName.indexOf(searchVal) != -1) {
item.ele.style.display = "block";
showList.push(item.ele);
}else {
item.ele.style.display = 'none';
}
})
console.log(showList);
current = 0;
}
//设置当前项的背景色及位置
$.each(showList, function(index, item){
if(index == current) {
item.style.background = "#eee";
$('#' + listId).scrollTop(item.offsetTop);
}else {
item.style.background = "";
}
})
//设置下拉框的高度
//212为列表框的最大高度
if(212 > $('#' + listId + ' div').eq(0).height() * showList.length) {
$('#' + listId).height($('#' + listId + ' div').eq(0).height() * showList.length);
}else {
$('#' + listId).height(212);
}
})
}
function initSearchInput() {
//给下拉箭头绑定点击事件 点击下拉箭头显示/隐藏对应的列表
//输入框的类名为selectInput
//下拉箭头的类名为picture_click、dropDowns
//下拉列表的类名为selectList
for(var i = 0; i < $('.picture_click').length; i++) {
$('.picture_click').eq(i).click(function(){
$(this).parent().find('.selectList').toggle();
})
}
//为列表中的每一项绑定鼠标经过事件
$('.selectList div').mouseenter(function(){
$(this).css("background", "#eee").siblings().css("background", "");
});
//为列表中的每一项绑定单击事件
$('.selectList div').click(function(){
//文本框为选中项的值
$(this).parent().parent().find('.selectInput').val($(this).html());
//下拉框隐藏
$(this).parent().hide();
});
//点击下拉框外部的时候使下拉框隐藏
var dropDowns = document.getElementsByClassName('dropDowns');
var selectList = document.getElementsByClassName('selectList');
document.body.onclick = function(e){
e = e || window.event;
var target = e.target || e.srcElement;
for(var i = 0; i < dropDowns.length; i++) {
if(target != dropDowns[i] && target != selectList[i]){
selectList[i].style.display = 'none';
}
}
}
}
</script>
此时的页面
需要注意的地方：
1. 使用此方法时，需要给输入框加类名selectInput，给下拉剪头加类名picture_click、dropDowns，给列表框加类名selectList;
2. 输入框需要有list属性，list属性对应的值为列表框的id值
3. 需要给文本框绑定事件，onfocus="fuzzySearch.call(this)"，（由于自定义的函数中，this指向的是window，所以需要通过call方法改变this指向，即指向该文本框，以便在方法中使用）
4. 在实现搜索功能的过程中，遇到一点小问题，就是在获取列表项的offersetTop时，获取的是28，找不出原因，最终通过查阅相关资料终于解决，即想要获取子元素的offsetTop，则需要给父元素设置相对定位，才能获取到正确的offsetTop。
还能在线调试哦！
如果对您有帮助，记得点赞哦！需要你的支持与鼓励，同时也欢迎您留下宝贵意见！
1325
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
