上来先展示效果：
默认展示效果：
输入内容:
上代码：
css部分：
<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;
}
.nullcon{
display: none;
text-align: center;
padding: 10px;
word-break: break-all;
}
</style>
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, ‘cityList‘)" />
<div class="picture_click dropDowns" style=""></div>
<div id="cityList" class="selectList">
</div>
</div>
</div>
js部分：
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
function fuzzySearch(listId) {
var that = this;
//初始化下拉框
initSearchInput(that, listId);
var listArr = [
{‘eleId‘:‘01‘,eleName:‘测试公司‘},
{‘eleId‘:‘02‘,eleName:‘出纳测试公司1‘},
{‘eleId‘:‘03‘,eleName:‘期间设置公司‘},
{‘eleId‘:‘04‘,eleName:‘演示公式‘},
{‘eleId‘:‘05‘,eleName:‘公司11‘},
{‘eleId‘:‘06‘,eleName:‘HFY测试公司‘},
{‘eleId‘:‘07‘,eleName:‘测试公司2‘},
{‘eleId‘:‘08‘,eleName:‘中餐饮有限公司‘},
{‘eleId‘:‘09‘,eleName:‘烤匠烤鱼餐厅‘},
{‘eleId‘:‘10‘,eleName:‘呷哺呷哺北京1‘},
{‘eleId‘:‘11‘,eleName:‘呷哺呷哺北京2店‘},
{‘eleId‘:‘12‘,eleName:‘呷哺呷哺北京3店‘},
{‘eleId‘:‘13‘,eleName:‘肯德基‘},
{‘eleId‘:‘14‘,eleName:‘麦当劳‘},
{‘eleId‘:‘15‘,eleName:‘必胜客‘},
{‘eleId‘:‘16‘,eleName:‘麦当劳222‘}
]
var aa=$(‘#‘ + listId);
//遍历数组，创建元素默认显示
$(‘#‘ + listId).html(‘‘);
$.each(listArr, function(index, item){
var divStr = ‘<div id=‘+item.eleId+‘>‘+item.eleName+‘</div>‘;
$(‘#‘ + listId).append(divStr);
})
$(‘#‘ + listId).append(‘<div id="nullcon" class="nullcon">没有找到内容</div>‘);
//current用来记录当前元素的索引值
var current = 0;
//匹配文本框中输入的字符串
var showList = searchText(that, listArr, listId);
bindFun();
//为文本框绑定键盘引起事件
$(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].eleName);
//下拉框隐藏
$(‘#‘ + listId).hide();
}else {
//other
console.log(‘other‘);
showList = searchText(that, listArr, listId);
current = 0;
}
//设置当前项的背景色及位置
if(showList && showList.length!=0){
$.each(showList, function(index, item){
if(index == current) {
$(‘#‘ + item.eleId).css(‘background‘, ‘#eee‘);
$(‘#‘ + listId).scrollTop($(‘#‘ + item.eleId).get(0).offsetTop);
}else {
$(‘#‘ + item.eleId).css(‘background‘, ‘‘);
}
})
}
//设置下拉框的高度
//212为列表框的最大高度
if(showList && showList.length!=0){
if(212 > $(‘#‘ + listId).find(‘div‘).eq(0).height() * showList.length) {
$(‘#‘ + listId).height($(‘#‘ + listId).find(‘div‘).eq(0).height() * showList.length);
}else {
$(‘#‘ + listId).height(212);
}
}
})
}
//绑定事件
function bindFun(){
//给下拉箭头绑定点击事件 点击下拉箭头显示/隐藏对应的列表
//输入框的类名为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‘).bind(‘click‘, function(){
//文本框为选中项的值
$(this).parent().parent().find(‘.selectInput‘).val($(this).html());
//下拉框隐藏
$(this).parent().hide();
});
}
function initSearchInput(that, listId) {
//点击下拉框外部的时候使下拉框隐藏
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;
console.info(‘target‘, target);
console.info(‘that‘, that);
console.info(‘===‘, target == that)
if(target == that){
$(‘#‘ + listId).show();
}else{
for(var i = 0; i < dropDowns.length; i++) {
if(target != dropDowns[i] && target != selectList[i]){
selectList[i].style.display = ‘none‘;
}
}
}
}
}
function searchText(that, listArr, listId){
//文本框中输入的字符串
var searchVal = $(that).val();
var showList = [];
if(showList.length== 0 && !$(that).val()){
//showList为列表中和所输入的字符串匹配的项
showList = listArr;
}
if(searchVal){
//将和所输入的字符串匹配的项存入showList
//将匹配项显示，不匹配项隐藏
$.each(listArr, function(index, item){
if(item.eleName.indexOf(searchVal) != -1) {
$(‘#‘ + item.eleId).css(‘display‘, ‘block‘);
showList.push(item);
}else {
$(‘#‘ + item.eleId).css(‘display‘, ‘none‘);
}
})
}else{
showList = listArr;
$.each(listArr, function(index, item){
$(‘#‘ + item.eleId).css(‘display‘, ‘block‘);
})
$(that).siblings(‘.selectList‘).find(‘#nullcon‘).hide();
}
if(showList.length== 0 && $(that).val()){
$(‘#‘ + listId).height(50);
$(that).siblings(‘.selectList‘).find(‘#nullcon‘).html(‘没有找到"‘+$(that).val()+‘"的内容‘).show();
}
console.log(‘showList‘, showList);
return showList;
}
</script>
原文地址：https://www.cnblogs.com/janice-jia/p/9708815.html
时间： 2024-10-12 16:52:05