【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(重写)相关推荐

web 前端常用组件【02】Select 下拉框
1.jQuery获取Select选择的Text和Value 语法解释: $("#select_id").change(function(){//code...}); //为Sele ...
Web前端—既可以输入又可以选择的input框
又是一周,以前总说码农码农现在才理解为什么这个职业刚开始就是搬砖的了废话就到此为止今天给大家说一下如何利用HTML5特性写一个既可以输入又可以选择的输入框其实在HTML5中,有这样一个属性的In ...
php前端介绍,Web前端的开发前景介绍
"路漫漫其修远兮,吾将上下而求索",这句出自<离骚>. 虽然端午已过,但是还是不影响一个程序员想表(zhuang)达(boy)自己此刻心情的冲动. 偶然路过同事旁边,不 ...
前端系列——vue2+高德地图web端开发（poi搜索两种方式）
前端系列--vue2+高德地图web端开发(poi搜索) 前言基础什么是poi搜索 1. 输入提示结合poi搜索官方代码步骤 1.进行plugins插件注册 2.data中编写placeSea ...
将Select转变为支持输入内容对Select的Option进行筛选的js
/*** 将Select转变为支持输入内容对Select的Option进行筛选的js* var $select = $("select["+TriangleDefinition.H ...
科大迅飞语音听写（流式版）WebAPI，Web前端、H5调用语音识别，语音搜索，语音听写
前言由于公司有个Web项目需要用到语音搜索功能,找了一些第三方库都不太理想,要么语音识别速度很慢,要么不能精确识别等等,最后选择了迅飞语音(迅飞语音听写(流式版)WebAPI).迅飞语音相对来说做得 ...
html输入转换半角,Web前端开发：聊聊input输入框全角和半角应用
最近在开发一个国际业务的开户注册项目的时候,遇到关于input输入的问题,涉及到全角和半角的问题,刚开始的时候只是按照国内正常的去判断的. 问题其他国家的user,输入有时候会用全角,会报错,因为接 ...
Web前端技术个人学习经验总结
目录: 1.2017-12-24(第一天Web项目): 2.2017-12-25(第二天表格): 3.2017-12-25(第二天框架及表单): 4.2017-12-2 ...
web 前端学习线路图
web 前端学习线路图一.HTML 教程 HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用 ...

【web前端】可筛选[输入搜索]的select(重写)

【web前端】可筛选[输入搜索]的select(重写)相关推荐

最新文章

热门文章