|
【web前端】可筛选[输入搜索]的select(重写)
--- filterSelect.js
/**
* 将Select转变为支持输入内容对Select的Option进行筛选的js
* @author wanghq
* @Date 2017年12月4日 18:38:29
* var $select = $("select["+TriangleDefinition.HTML_DEF_ATTR_KEY_FILTER_SELECT+"]").filterSelect();
$(selectDOMRouteProcess).filterSelectReloadOption();// 把selectDOMRouteProcess变为可filterSelect
*/
$(document).ready(function(){
// 这段代码，是遍历所有拥有 TriangleDefinition.HTML_DEF_ATTR_KEY_FILTER_SELECT 属性的元素，并把他们变为可编辑
if($("select["+TriangleDefinition.HTML_DEF_ATTR_KEY_FILTER_SELECT+"]").length > 0){
$("select["+TriangleDefinition.HTML_DEF_ATTR_KEY_FILTER_SELECT+"]").filterSelect();
}
});
/**
* 将Select转化为FilterSelect
*/
$.fn.filterSelect = (function(){
return function(){
var $body = $("body");
this.each(function(i, v){
if($(v).parent().is("div") && $(v).parent().attr("class") == "m-input-select"){
return false;// 如果当前Select已经是FilterSelect,则退出.
}
var $sel = $(v);// 得到Select的DOM
var $div = $('<div class="m-input-select" style="width:'+$sel.width()+'"></div>');//生成覆盖层的DIV,宽度等于原Select宽度
var $input = $("<input type='text' class='m-input' />");
// var $wrapper = $("<div class='m-list-wrapper'><ul class='m-list'></ul></div>");
var $wrapper = $("<ul class='m-list'></ul>");
$div = $sel.wrap($div).hide().addClass("m-select").parent();
$div.append($input).append("<span class='m-input-ico'></span>").append($wrapper);
// 遮罩层显示 + 隐藏
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.size();
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){
// console.log($wrapper);
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 + height - eHeight);
$wrapper.scrollTop(top + eHeight - height);
}
},
setIndex: function($li){
if($li.size() > 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());
$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.size() > 0){
var val = $.trim($li.html());
$input.val(val).attr("placeholder", val);
$input.attr("title", 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 对象
function resetOption(){
var html = "", val = "", defVal = "";
$sel.find("option").each(function(i, v){
if(i == 0){
defVal = v.text;
}
if(v.selected){
val = v.text;
};
html += '<li class="m-list-item'+ (v.selected ? " m-list-item-active" : "") +'" data-value="'+ v.value +'" title="'+ v.text +'">'+ v.text +'</li>';
});
if(val.length == 0 ){
val = defVal;
}
$input.val(val);
$input.attr("title", val);
$input.attr("placeholder", val);
$wrapper.html(html);
};
$sel.on("optionChange", resetOption).trigger("optionChange");
$sel.on("setEditSelectValue", function(e, val){
// console.log(val);
var $all = $wrapper.find(".m-list-item"), $item;
for(var i = 0, max = $all.size(); 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;
};
})();
/**
* 更新当前FilterSelect的Option
*/
$.fn.filterSelectReloadOption = (function(){
return function(){
this.each(function(i, v){
var $div = $(v).parent();
if($div.is("div") && $div.attr("class") == "m-input-select"){
var $sel = $(v);// 得到Select的DOM
var $input = $div.find(":text[class='m-input']");
var $wrapper = $div.find("ul[class='m-list']");
$wrapper.empty();
var html = "", val = "", defVal = "";
$sel.find("option").each(function(i, v){
if(i == 0){
defVal = v.text;
}
if(v.selected){
val = v.text;
};
html += '<li class="m-list-item'+ (v.selected ? " m-list-item-active" : "") +'" data-value="'+ v.value +'" title="'+ v.text +'">'+ v.text +'</li>';
});
if(val.length == 0 ){
val = defVal;
}
$input.val(val);
$input.attr("title", val);
$input.attr("placeholder", val);
$wrapper.html(html);
}
});
return this;
};
})();
-- filterSelect.css .m-input-select { display: inline-block;
*display: inline;
position: relative;
-webkit-user-select: none;
}
.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-wrapper {
}
.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 {
color: black;
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;
}
|
【web前端】可筛选[输入搜索]的select(重写)
墨衍会员
·
AI 创作全网分发
墨衍智能分发
本文由作者通过墨衍一键同步至各平台
1分发平台
900+累计阅读
963平均单平台
已同步平台
优快云
微信公众号
微博
知乎
掘金
百家号
博客园
抖音
小红书
你的文章也可以这样分发
墨衍会员 ¥399起/年，写一次发全网
我也要
2268
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
