文档章节

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

donkeyMeng
 donkeyMeng
发布于 2017/07/07 13:47
字数 596
阅读 132
收藏 1

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>

 

© 著作权归作者所有

donkeyMeng
粉丝 3
博文 30
码字总数 8385
作品 0
丰台
程序员
私信 提问
手把手教你自己写一个模糊搜索的下拉框

我们先看一下效果图 下面我们就开始做这个有模糊搜索的下拉框; 首先我们需要jquery的支持;然后我们将这个模糊搜索扩展到jquery 中,方便以后使用 直接上代码: 这个文件命名为WYButil.js ...

中国首席砖家
2017/12/12
187
0
Windows Phone 7 自动完成输入框控件AutoCompleteBox

自动完成输入框控件AutoCompleteBox是一种很常用的控件,它实现了文本框的输入的自动搜索的功能,可以加快用户的输入效率。该控件在微软的Silverlight 开源控件项目“Silverlight Toolkit”中...

junwong
2012/02/28
532
0
前端实现输入框input输入时,调用后台查询。

这几天做了一个前端html页面,基于bootstrap框架开发,里面有个需求就是在输入框中输入字母或者文字时,下拉框自动刷新模糊查询出的信息。最初我的想法是监控键盘上的按键输入,每次输入一个...

道之若无
2018/04/17
0
0
bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

引入问题 之前博主在实际开发中遇到了一个问题,就是需要既支持多选又同时支持模糊查询的下拉控件,大家所熟知的比较强大的下拉框插件bootstrap-select2,博主当时也参考过,但是发现它的多选...

Airey
2018/09/19
0
0
达选运营管理后台优化开发

二. 精选 会选管理页面搜索功能 1. 分类搜索做二级下拉 ,要有一级运动户外就不用显示了。 2. 能按照用户昵称搜索 也能按照达人(user)id搜索 查询语句要关联 user表 3.能按照title 模糊搜索...

霖vv
2017/09/28
3
0

没有更多内容

加载失败,请刷新页面

加载更多

【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
13
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
13
0
【Medium 万赞好文】ViewModel 和 LIveData:模式 + 反模式

原文作者: Jose Alcérreca 原文地址: ViewModels and LiveData: Patterns + AntiPatterns 译者:秉心说 View 和 ViewModel 分配责任 理想情况下,ViewModel 应该对 Android 世界一无所知。...

秉心说
昨天
16
0
重学计算机组成原理(十二) - 异常和中断

1 概览 完好的程序都满足以下特征 自动运行 我们的程序和指令都是一条条顺序执行,不需要通过键盘或者网络给这个程序任何输入 正常运行 没有遇到计算溢出之类的程序错误。 不过,现实的软件世...

JavaEdge
昨天
11
0
程序设计基础(C)第06讲例程

1summing.c /* summing.c -- 根据用户键入的整数求和 */#include <stdio.h>int main(void){ long num; long sum = 0L; /* 把sum 初始化为0 */ int status; p......

树人大学数字媒体吴凡
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部