将Select转变为支持输入内容对Select的Option进行筛选的js

/*** 将Select转变为支持输入内容对Select的Option进行筛选的js* 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){var inputVal = "";if($(v).parent().is("div") && $(v).parent().attr("class") == "m-input-select"){return false;// 如果当前Select已经是FilterSelect,则退出.}var $sel = $(v);// 得到Select的DOMvar $div = $('<div class="m-input-select" style="width:'+$sel.width()+'"></div>');//生成覆盖层的DIV,宽度等于原Select宽度var $input = $("<input type='text' class='m-input' style='width:"+$sel.width()+"' />");// 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");  //:visible 选择器选取当前可见的每个元素。this.setIndex(this.$list.filter(".m-list-item-active"));//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，并且赋值为 activevar $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 13switch(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 iewrapper.hide();}, 1)//将wrapper对象绑定到当前select上$(v).data("wrapper", wrapper);});return this;};
})();/*** 更新当前FilterSelect的Option*/
$.fn.filterSelectReloadOption = (function(){return function(keepInputValue){keepInputValue = keepInputValue || false;this.each(function(i, v){var $div = $(v).parent();if($div.is("div") && $div.attr("class") == "m-input-select"){var $sel = $(v);// 得到Select的DOMvar $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;}if (!keepInputValue) {$input.val(val);$input.attr("title", val);$input.attr("placeholder", val);}$wrapper.html(html);//获取绑定到当前select上的wrapper对象var wrapper = $sel.data("wrapper");//更新wrapper对象wrapper.$list = $wrapper.find(".m-list-item");wrapper.index = 0;wrapper.$cur = [];}});return this;};
})();

将Select转变为支持输入内容对Select的Option进行筛选的js相关推荐

【web前端】可筛选[输入搜索]的select(重写)
[web前端]可筛选[输入搜索]的select(重写) --- filterSelect.js /** * 将Select转变为支持输入内容对Select的Option进行筛选的js * @aut ...
html5 input select,【Web前端问题】select如何实现既可以像input那样支持输入，又可以从下拉中选择? antd...
不可以多选,使用tags属性的时候会支持多选,希望能够保存自己输入的内容, 网上找的答案说是用combobox跟tabIndex={0}这两个属性,试了下是不起作用的,我当前用的antd版本是3.15 ...
Speech模块管理语音输入功能，提供语音识别功能，可支持用户通过麦克风设备进行语音输入内容。通过plus.speech可获取语音输入管理对象
Speech模块管理语音输入功能,提供语音识别功能,可支持用户通过麦克风设备进行语音输入内容.通过plus.speech可获取语音输入管理对象. 语音输入接口可使得网页开发人员能快速调用设备的麦克风进 ...
vue+iview4.0 , vue+element实现下拉框可以自定义输入内容
前言: 最近10月的时候 iview4.0 更新了,但是一直在忙也没用到,正好因为要实现一个下拉框里面我要自定义输入内容的效果,element里面是有这个效果,antd里面没有,因为本项目用的ivie ...
Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择 1.建立一aspx页面,html代码 <HTML> <HEAD> < ...
在文本框中提示用户输入内容格式的方法
希望达到的效果: 方法一:鼠标点击文本框时文字消失 <input id="login_name" type="text" οnblur="jav ...
python中输入提示_Python-Tkinter Text输入内容在界面显示的实例
使用Tkinter(py2.7)text文本框中输入内容在界面中显示–较为规整的代码: import Tkinter as tk class Window: def __init__(self,han ...
python换行输入数据_python将回车作为输入内容的实例
当input输入内容的时候,许多情况下输入回车键另起一行输入,但是这时候Pycharm就执行程序,然后结束,导致无法继续输入内容. 原因:Python默认遇到回车的时候,输入结束.所以我们需要更改这个 ...
使用iScroll时，input等不能输入内容的解决方法
2019独角兽企业重金招聘Python工程师标准>>> 最近做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscr ...

将Select转变为支持输入内容对Select的Option进行筛选的js

将Select转变为支持输入内容对Select的Option进行筛选的js相关推荐

最新文章

热门文章