给下拉框添加模糊查询功能

2019独角兽企业重金招聘Python工程师标准>>>

1.定义select标签。（select标签必须有一个position为relative的父标签，该父标签下除了select不要加其他内容）

<div style="position:relative">
    <select id="my-select">
      <option value="one">选择11111111111111</option>
      <option value="two">选择22222222222</option>
      <option value="three">选择3333333333333</option>
      <option value="four">选择4444444444444</option>
    </select>
</div>

2.引入fuzzyQuery.js

(
    function(){
        /*
         select 标签方法
         作用：模糊查询
         需要给select标签加一个 positioin：relative的div
         */
        $.fn.fuzzyQuery = function(options){

            var default_option_div_style = {
                "line-height":"25px",
                "font-size":"12px",
                "max-height":"200px",
                "z-index":"1999"
            }

            var _this = $(this);
            var _class = _this.attr('class');
            //获取select在屏幕中的坐标
            var _top = $(this).offset().top;
            var _left = $(this).offset().left;
            //获取select宽高
            var _width = $(this).outerWidth();
            var _paddingLeft = ($(this).innerWidth()-$(this).width())/2;
            var _height = $(this).height();
            //创建合适大小的div覆盖select
            var _cover = $('<div id="fuzzy-query-cover" style="position:absolute;"></div>');
            _cover.css({"width":_width,"height":_height,"top":0,"left":0});
            $(this).parent().children('#fuzzy-query-cover').remove();
            _cover.appendTo($(this).parent());
            //在覆盖cover中构建input
            var _container = $('<div style="position:relative;"><div>');
            _container.appendTo(_cover);
            //创建input text
            var _input = $('<input type="text" style=""/>');
            _input.css({"top":"0px","left":"0px","width":_width});
            _input.val($(this).find('option:selected').text());
            _input.appendTo(_container);
            _input.addClass(_class);
            //创建下拉框
            var _optionDiv = $('<div style="display: none;position: relative;"></div>');
            _optionDiv.css({"min-width":'100%',"top:":-_height,"left":"0px"});
            _optionDiv.appendTo(_container);

            var _optionUl = $('<ul style="position:relative;max-height:200px;overflow-y: scroll;border:1px solid #ccc;background-color: white;margin-bottom: 0px;"></ul>');
            _optionUl.css(default_option_div_style);
            _optionUl.appendTo(_optionDiv);

            var _close = $('<div style="position: relative;border: 1px solid #ccc;border-top:0px;width:100%;color:#999;line-height: 25px;height: 25px;z-index: 1999;background-color:white;"><a id="option-div-close" href="javascript:void(0);" style="float: right;margin-right: 10px;text-decoration: none;">关闭</a></div>');
            _close.appendTo(_optionDiv);
            _close.find('a').bind('click',function(){
                _optionDiv.css('display','none');
            });
            //###########################################################
            //将select中的数据填入input
            var data = [];
            var _options = $(this).find('option');
            _options.each(function(index){
                var _v = $(this).attr('value');
                var _k = $(this).text();
                var kv = {"name":_k,"value":_v};
                data[index]=kv;
            });
            //input获得焦点事件
            _input.bind('focus',function(){
                var key = $(this).val();
                fillData(_optionUl,data,null);
            });
            //input失去焦点
            //input改变事件
            _input.bind('input propertychange',function(){
                var key = $(this).val();
                fillData(_optionUl,data,key);
            });
            //##################################
            //反显
            function fillData(target,data,key){
                target.children('li').remove();
                var data = filter(data,key);
                for(var i=0;i<data.length;i++){
                    var kv = data[i];
                    var _li = $('<li style="width:100%"></li>');
                    _li.text(data[i]['name']);
                    _li.attr('value',data[i]['value']);
                    _li.css({"padding-left":_paddingLeft});
                    _li.appendTo(target);
                    _li.bind('mouseover',function(){
                        $(this).css({"background-color": "#167fc9"});
                    });
                    _li.bind('mouseout',function(){
                        $(this).css({"background-color": "white"});
                    });
                    _li.bind('click',function(){
                        var _v = $(this).attr('value');
                        var _n = $(this).text();
                        _this.val(_v);
                        _this.trigger('change');
                        _input.val(_n);
                        _optionDiv.css('display','none');
                    });


                }
                if(data.length>0){
                    _optionDiv.css('display','block');
                }

            }

            //根据模糊查询过滤
            function filter(data,key){
                var newData = [];
                if('undefined'==data||null==data){
                    return newData;
                }
                if(null==key||''==key){
                    return data;
                }
                var j = 0;
                for(var i=0;i<data.length;i++){
                    var kv = data[i];
                    if(kv['name'].indexOf(key)>=0){
                        newData[j]=data[i];
                        j++;
                    }
                }
                return newData;
            }
        }
    }
)(jQuery)

3.调用模糊查询方法。

<script type="text/javascript">
  $('#my-select').fuzzyQuery();
</script>

 

转载于:https://my.oschina.net/mlh3823/blog/1204285