你的位置:首页 > Java教程

[Java教程]自编写模糊查询函数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 ></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 >' + e + '</li>'      });      obj.append(childList);      // ajax数据      /*$.ajax({        url: url,        type: 'POST',        data: param,      })      .done(function(data) {                // data需为数组        data.forEach(function(e) {          childList += '<li >' + 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