通常我们的项目中可能经常会用到模糊查询功能,这样如果每次都加载一个像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
原标题:自编写模糊查询函数autoQuery
关键词:函数