自编写模糊查询函数autoQuery

通常我们的项目中可能经常会用到模糊查询功能，这样如果每次都加载一个像jquery的autoComplete插件的话即用不到其多余的功能，也加大了网页的加载量。于是自己写了一个function函数，想要用的时候就调用即可，非常方便，代码量也很少，可以实现基本的模糊查询功能。

一、autoQuery介绍

autoQuery函数支持传入三个参数elem, url, param，即autoQuery(elem, url, param)。

其中elem为绑定模糊查询的元素对象，一般为<input>;

url为所要获取数据的ajax请求的url地址字符串，如：'getQuery.json';

param为给服务器端传送的参数对象，如{value: elem.val()};

二、autoQuery代码

(1) css样式

    /* 模糊查询样式开始 */
    .auto-query-wrap {
        position: absolute;
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
        border: 1px solid #ddd;
        background: #fff;
        color: #333;
        padding-left: 0px;
        z-index: 9999;
    }
    
    .auto-query-wrap .query-item {
        position: relative;
        margin: 0;
        padding: 3px 1em 3px .4em;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    
    .query-item:hover {
        background: #ddd;
    }
    /* 模糊查询样式结束 */

(2) js代码（基于jquery）

 // 模糊查询功能
        function autoQuery(elem, url, param) {
            var position = {
                    top: elem.offset().top,
                    left: elem.offset().left,
                    width: elem.outerWidth(),
                    height: elem.outerHeight(),
                    getPosition: function() {
                        return {
                            top: this.top,
                            left: this.left,
                            width: this.width,
                            height: this.height
                        };
                    }
                },
                html = '<ul class="auto-query-wrap"></ul>',
                childList = '';

            $('.auto-query-wrap').remove();

            $('body').append(html);

            var obj = $('.auto-query-wrap');

            obj.css({
                top: position.getPosition().top + position.getPosition().height,
                left: position.getPosition().left,
                width: position.getPosition().width
            });

            // 静态数据
            var listArr = ['abc', 'ac', 'ad', 'ab', 'bc'];

            listArr.forEach(function(e) {
                childList += '<li class="query-item">' + e + '</li>'
            });

            obj.append(childList);

            // ajax数据
            /*$.ajax({
                url: url,
                type: 'POST',
                data: param,
            })
            .done(function(data) {
                
                // data需为数组
                data.forEach(function(e) {
                    childList += '<li class="query-item">' + e + '</li>'
                });

                obj.append(childList);
            })
            .fail(function() {
                alert('出错了:(');
            });*/

            $(document).on('click', '.query-item', function() {
                var txt = $(this).text();

                elem.val(txt);
            });

            $(document).on('click', function(e) {
                var target=$(e.target);

                if(target.closest(elem).length == 0){
                   obj.css('display', 'none');
                }
            });
        }

(3) 绑定对象传参（其中query_input为对象的id）

$('#query_input').on('input', function() {
       var e = $(this),
           url = '/ajax_filter_metric/',
           param = {
                   'metric_text': e.val()
           };

       autoQuery(e /*, url, param*/);
});

 

三、autoQuery演示

演示地址及源码：http://runjs.cn/code/qlqcqncf  （只演示了静态数据，实际开发需要调用ajax请求根据客户端输入值返回相应的查询数据）

 

由于本人技术有限，如代码存在问题，欢迎评论指正:)

原创文章，转载请注明来自一个萝卜一个坑 -博客园[http://www.cnblogs.com/luozhihao]

本文地址：http://www.cnblogs.com/luozhihao/p/5069842.html