根据网上现有的做了一些更改,参考源:
https://www.cnblogs.com/wangzhaobo/p/8984135.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>1213</title>
<script src="C:\Users\wlp\Downloads\jquery-3.5.1.min.js" charset="utf-8"></script>
<style>
.m-input-select{display:inline-block;position:relative;}
.m-input-select ul, .m-input-select li{padding:0;margin:0;}
.m-input-select .m-input{padding-right:22px;}
.m-input-select .m-input-ico{position:absolute;right:0;top:0;width:22px;height:100%;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAATElEQVQoU2NkIBEwkqiegTwNcXFx/4m1CW4DMZoWLVrEiOIkfJpAikGuwPADNk0wxVg1gASRNSErxqkBpgldMV4NuEKNvHggNg5A6gBo4xYmyyXcLAAAAABJRU5ErkJggg==) no-repeat 50% 50%;}
.m-input-select .m-list{display:none;position:absolute;z-index:1;top:100%;left:0;right:0;max-width:100%;max-height:250px;overflow:auto;border-bottom:1px solid #ddd;}
.m-input-select .m-list-item{cursor:default;padding:5px;margin-top:-1px;list-style:none;background:#fff;border:1px solid #ddd;border-bottom:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-input-select .m-list-item:hover{background:#2D95FF;}
.m-input-select .m-list-item-active{background:#2D95FF;}
</style>
</head>
<body>
<div class="m-input-select">
<input type="text" class="m-input">
<span class="m-input-ico"></span>
<ul class="m-list" style="display: none;">
<li class="m-list-item" data-value="1" style="display: none;">321</li>
<li class="m-list-item" data-value="2" style="display: none;">天天</li>
<li class="m-list-item" data-value="3" style="display: none;">xx</li>
<li class="m-list-item" data-value="1" style="">哇哈哈哇哈哈哇哈哈哇哈哈哇哈哈</li>
<li class="m-list-item" data-value="2" style="display: none;">天天</li>
<li class="m-list-item" data-value="3" style="display: none;">xx</li>
<li class="m-list-item" data-value="1" style="display: none;">哇哈哈</li>
<li class="m-list-item" data-value="2" style="display: none;">天天</li>
<li class="m-list-item" data-value="3" style="display: none;">xx</li>
<li class="m-list-item" data-value="1" style="display: none;">哇哈哈</li>
<li class="m-list-item" data-value="2" style="display: none;">天天</li>
<li class="m-list-item" data-value="3" style="display: none;">xx</li>
</ul>
</div>
</body>
<script type="text/javascript">
$.fn.filterSelect = (function(){
return function(){
var $body = $("body");
this.each(function(i, v){
var $sel = $(v),
$div = $('.m-input-select');
var $input = $(".m-input");
var $wrapper = $(".m-list");
// 遮罩层显示 + 隐藏
var wrapper = {
show: function(){
$wrapper.show();
this.$list = $wrapper.find(".m-list-item:visible");
this.setIndex(this.$list.filter(".m-list-item-active"));
this.setActive(this.index);
},
hide: function(){
$wrapper.hide();
},
next: function(){
return this.setActive(this.index + 1);
},
prev: function(){
return this.setActive(this.index - 1);
},
$list: $wrapper.find(".m-list-item"),
index: 0,
$cur: [],
setActive: function(i){
// 找到第1个 li,并且赋值为 active
var $list = this.$list, size = $list.length;
if(size <= 0){
this.$cur = [];
return;
}
$list.filter(".m-list-item-active").removeClass("m-list-item-active");
if(i < 0){
i = 0;
}else if(i >= size){
i = size - 1;
}
this.index = i;
this.$cur = $list.eq(i).addClass("m-list-item-active");
this.fixScroll(this.$cur);
return this.$cur;
},
fixScroll: function($elem){
var height = $wrapper.height(), top = $elem.position().top, eHeight = $elem.outerHeight();
var scroll = $wrapper.scrollTop();
// 因为 li 的 实际 top,应该要加上 滚上 的距离
top += scroll;
if(scroll > top){
$wrapper.scrollTop(top);
}else if(top + eHeight > scroll + height){
$wrapper.scrollTop(top + eHeight - height);
}
},
setIndex: function($li){
if($li.length > 0){
this.index = this.$list.index($li);
$li.addClass("m-list-item-active").siblings().removeClass("m-list-item-active");
}else{
this.index = 0;
}
}
};
// input 的操作
var operation = {
// 文字变了,更新 li, 最低效率的一种
textChange: function(){
val = $.trim($input.val());
$input.attr("placeholder",val);
$wrapper.find(".m-list-item").each(function(i, v){
if(v.innerHTML.indexOf(val) >= 0){
$(v).show();
}else{
$(v).hide();
}
});
wrapper.show();
},
// 设值
setValue: function($li){
if($li && $li.length > 0){
var val = $.trim($li.html());
$input.val(val).attr("placeholder", val);
wrapper.setIndex($li);
$sel.val($li.attr("data-value")).trigger("change");
}else{
$input.val(function(i, v){
return $input.attr("placeholder");
});
};
wrapper.hide();
this.offBody();
},
onBody: function(){
var self = this;
setTimeout(function(){
self.offBody();
$body.on("click", self.bodyClick);
}, 10);
},
offBody: function(){
$body.off("click", this.bodyClick);
},
bodyClick: function(e){
var target = e.target;
if(target != $input[0] && target != $wrapper[0]){
wrapper.hide();
operation.setValue();
operation.offBody();
}
}
};
$sel.on("setEditSelectValue", function(e, val){
// console.log(val);
var $all = $wrapper.find(".m-list-item"), $item;
for(var i = 0, max = $all.lenght; i < max; i++){
$item = $all.eq(i);
if($item.attr("data-value") == val){
operation.setValue($item);
return;
}
}
});
// input 聚焦
$input.on("focus", function(){
//this.value = "";
operation.textChange();
operation.onBody();
}).on("input propertychange", function(e){
operation.textChange();
}).on("keydown", function(e){
// 上 38, 下 40, enter 13
switch(e.keyCode){
case 38:
wrapper.prev();
break;
case 40:
wrapper.next();
break;
case 13:
operation.setValue(wrapper.$cur);
break;
}
});
$div.on("click", ".m-input-ico", function(){
// 触发 focus 和 blur 事件
// focus 是因为 input 有绑定
// 而 blur,实际只是失去焦点而已,真正隐藏 wrapper 的是 $body 事件
$wrapper.is(":visible") ? $input.blur() : ($input.val("").trigger("focus"));
});
// 选中
$wrapper.on("click", ".m-list-item", function(){
operation.setValue($(this));
return false;
});
setTimeout(function(){
// for ie
wrapper.hide();
}, 1)
});
return this;
};
})();
</script>
<!-- 这段代码,是遍历所有拥有 data-edit-select 属性的元素,并把他们变为可编辑 -->
<script>
// 使用了这个插件,select该怎么用就怎么用
// 任何选择,同样会触发 select 的 更变的说【即select的值会同步更新】
//
$(".m-list").filterSelect();
</script>
</html>