如何实现select组件的选择输入过滤作用

实现select组件的选择输入过滤作用的js代码如下:

/**

*其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码

**

/



(function ( $ ) {
 
    $.fn.editableSelect = function() {
        var instanceVar;
        //此this.each()指的就是对当前对象的遍历,这里的当前对象指代的就是对当前两个下拉选择框对象的一一遍历
        this.each(function(){
            var originalSelect = $(this);
            //check if element is a select
            if(originalSelect[0].tagName.toUpperCase()==="SELECT"){
                //wrap the original select在原始的<select>外围插入<div></div>框
                originalSelect.wrap($("<div/>"));
                var wrapper = originalSelect.parent();
                wrapper.css({display: "inline-block"});
                //place an input which will represent the editable select
//在选择菜单上加入input输入框<input alt title ..... style="width:......" value="">
var inputSelect = $("<input/>").insertBefore(originalSelect); //get and remove the original id var objID = originalSelect.attr("id"); originalSelect.removeAttr("id"); //add the attributes from the original select
//input输入框的各种属性设置
inputSelect.attr({ alt: originalSelect.attr("alt"), title: originalSelect.attr("title"), class: originalSelect.attr("class"), name: originalSelect.attr("name"), disabled: originalSelect.attr("disabled"), tabindex: originalSelect.attr("tabindex"), id: objID }); //get the editable css properties from the select var rightPadding = 15; inputSelect.css({ width: originalSelect.width()-rightPadding, height: originalSelect.height(), fontFamily: originalSelect.css("fontFamily"), fontSize: originalSelect.css("fontSize"), background: originalSelect.css("background"), paddingRight: rightPadding }); inputSelect.val(originalSelect.val()); //add the triangle at the right var triangle = $("<div/>").css({ height: 0, width: 0, borderLeft: "5px solid transparent", borderRight: "5px solid transparent", borderTop: "7px solid #999", position: "relative", top: -(inputSelect.height()/2)-5, left: inputSelect.width()+rightPadding-10, marginBottom: "-7px", pointerEvents: "none" }).insertAfter(inputSelect); //create the selectable list that will appear when the input gets focus
//聚焦的时候加上<ol><ol/>下拉框
var selectList = $("<ol/>").css({ display: "none", listStyleType: "none", width: inputSelect.outerWidth()-2, padding: 0, margin: 0, border: "solid 1px #ccc", fontFamily: inputSelect.css("fontFamily"), fontSize: inputSelect.css("fontSize"), background: "#fff", position: "absolute", zIndex: 1000000 }).insertAfter(triangle); //add options
  //在resourceData变量中存储当前下拉框中的所有数据
//****** var resourceData = [];
originalSelect.children().each(
function(index, value){ prepareOption($(value).text(), wrapper); resourceData.push($(value).text()); }); //****** //bind the focus handler
//在鼠标聚焦的时候fadeIn(100),即下拉显示当前下拉框
inputSelect.focus(function(){ selectList.fadeIn(100);
//v存储的是在input输入框中输入的内容,如果输入的内容不为空,就在存储原始下拉框的所有数据中找到出现v中字符的数据压入newResourceData变量中
//****** var v = inputSelect.val(); var newResourceData = []; if(v != "") { $.each(resourceData, function(i, t){ if(t.indexOf(v) != -1) newResourceData.push(t); }); } wrapper.children("ol").empty(); $.each(newResourceData, function(i, t){ prepareOption(t, wrapper); }); //****** }).blur(function(){ selectList.fadeOut(100); }).keyup(function(e){ if(e.which==13) inputSelect.trigger("blur");
//在enter快捷键按下后弹起的时候执行的事件
//****** var v = inputSelect.val(); var newResourceData = []; if(v != "") { $.each(resourceData, function(i, t){ if(t.indexOf(v) != -1) newResourceData.push(t); }); } wrapper.children("ol").empty(); $.each(newResourceData, function(i, t){ prepareOption(t, wrapper); }); //****** }); //hide original element originalSelect.css({visibility: "hidden", display: "none"}); //save this instance to return it instanceVar = inputSelect }else{ //not a select return false; } });//-end each /** public methods **/ /** * Adds an option to the editable select * @param {String} value - the options value * @returns {void} */ instanceVar.addOption = function(value){ prepareOption(value, instanceVar.parent()); }; /** * Removes a specific option from the editable select * @param {String, Number} value - the value or the index to delete * @returns {void} */ instanceVar.removeOption = function(value){ switch(typeof(value)){ case "number": instanceVar.parent().children("ol").children(":nth("+value+")").remove(); break; case "string": instanceVar.parent().children("ol").children().each(function(index, optionValue){ if($(optionValue).text()==value){ $(optionValue).remove(); } }); break; } }; /** * Resets the select to it's original * @returns {void} */ instanceVar.restoreSelect = function(){ var originalSelect = instanceVar.parent().children("select"); var objID = instanceVar.attr("id"); instanceVar.parent().before(originalSelect); instanceVar.parent().remove(); originalSelect.css({visibility: "visible", display: "inline-block"}); originalSelect.attr({id: objID}); }; //return the instance return instanceVar; }; /** private methods **/ //prepareOption函数的作用就是在当前下拉框中添加新选项 function prepareOption(value, wrapper){ var selectOption = $("<li>"+value+"</li>").appendTo(wrapper.children("ol")); var inputSelect = wrapper.children("input"); selectOption.css({ padding: "3px", textAlign: "left", cursor: "pointer" }).hover( function(){ selectOption.css({backgroundColor: "#eee"}); }, function(){ selectOption.css({backgroundColor: "#fff"}); }); //bind click on this option selectOption.click(function(){ inputSelect.val(selectOption.text()); inputSelect.trigger("change"); }); } }( jQuery ));

 

转载于:https://www.cnblogs.com/zlz-ling/p/4023079.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值