jQuery实现select模糊查询(反射机制)


Posted in Javascript onJanuary 14, 2017

通过如下代码就可以简单实现select带模糊查询的条件查询,具体如下jquery.select.js如下:

(function($) {
 $.selectSuggest = function(target, data, itemSelectFunction) {
 var defaulOption = {
  suggestMaxHeight: '200px',//弹出框最大高度
  itemColor : '#000000',//默认字体颜色
  itemBackgroundColor:'RGB(199,237,204)',//默认背景颜色
  itemOverColor : '#ffffff',//选中字体颜色
  itemOverBackgroundColor : '#C9302C',//选中背景颜色
  itemPadding : 3 ,//item间距
  fontSize : 12 ,//默认字体大小
  alwaysShowALL : true //点击input是否展示所有可选项
  };
  var maxFontNumber = 0;//最大字数
  var currentItem;
  var suggestContainerId = target + "-suggest";
  var suggestContainerWidth = $('#' + target).innerWidth();
  var suggestContainerLeft = $('#' + target).offset().left;
  var suggestContainerTop = $('#' + target).offset().top + $('#' + target).outerHeight();
  var showClickTextFunction = function() {
  $('#' + target).val(this.innerText);
  currentItem = null;
  $('#' + suggestContainerId).hide();
  }
  var suggestContainer;
  if ($('#' + suggestContainerId)[0]) {
  suggestContainer = $('#' + suggestContainerId);
  suggestContainer.empty();
  } else {
  suggestContainer = $('<div></div>'); //创建一个子<div>
  }
  suggestContainer.attr('id', suggestContainerId);
  suggestContainer.attr('tabindex', '0');
  suggestContainer.hide();
  var _initItems = function(items) {
  suggestContainer.empty();
   var itemHight=0;
  for (var i = 0; i < items.length; i++) {
   if(items[i].text.length > maxFontNumber){
    maxFontNumber = items[i].text.length;
    }
   var suggestItem = $('<div></div>'); //创建一个子<div>
   suggestItem.attr('id', items[i].id);
   suggestItem.append(items[i].text);
   suggestItem.css({
    'padding':defaulOption.itemPadding + 'px',
   'white-space':'nowrap',
   'cursor': 'pointer',
   'background-color': defaulOption.itemBackgroundColor,
   'color': defaulOption.itemColor
   });
   suggestItem.bind("mouseover",
   function() {
   $(this).css({
    'background-color': defaulOption.itemOverBackgroundColor,
    'color': defaulOption.itemOverColor
   });
   currentItem = $(this);
   });
   suggestItem.bind("mouseout",
   function() {
   $(this).css({
    'background-color': defaulOption.itemBackgroundColor,
    'color': defaulOption.itemColor
   });
   currentItem = null;
   });
   suggestItem.bind("click", showClickTextFunction);
   suggestItem.bind("click", itemSelectFunction);
   suggestItem.appendTo(suggestContainer);
   suggestContainer.appendTo(document.body);
  }
  }
  var inputChange = function() {
  var inputValue = $('#' + target).val();
  inputValue = inputValue.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
  var matcher = new RegExp(inputValue, "i");
  return $.grep(data,
  function(value) {
   return matcher.test(value.text);
  });
  }
  $('#' + target).bind("keyup",
  function() {
  _initItems(inputChange());
  });
  $('#' + target).bind("blur",
  function() {
   if(!$('#' + suggestContainerId).is(":focus")){
   $('#' + suggestContainerId).hide();
   if (currentItem) {
   currentItem.trigger("click");
   }
   currentItem = null;
   return;
   }  
  });
  $('#' + target).bind("click",
  function() {
  if (defaulOption.alwaysShowALL) {
   _initItems(data);
  } else {
   _initItems(inputChange());
  }
  $('#' + suggestContainerId).removeAttr("style");
  var tempWidth = defaulOption.fontSize*maxFontNumber + 2 * defaulOption.itemPadding + 30;
  var containerWidth = Math.max(tempWidth, suggestContainerWidth);
  var h = this.scrollHeight;
  $('#' + suggestContainerId).css({
   'border': '1px solid #ccc',
   'max-height': '100px',
   'top': suggestContainerTop,
   'left': suggestContainerLeft,
   'width': containerWidth,
   'position': 'absolute',
   'font-size': defaulOption.fontSize+'px',
   'font-family':'Arial',
   'z-index': 99999,
   'background-color': '#FFFFFF',
   'overflow-y': 'auto',
   'overflow-x': 'hidden',
   'white-space':'nowrap'
  });
  $('#' + suggestContainerId).show();
  });
  _initItems(data);
  $('#' + suggestContainerId).bind("blur",
  function() {
  $('#' + suggestContainerId).hide();
  });
 }
 })(jQuery);

html如下:

<!DOCTYPE html>
 <html lang="zh_cn">
  <head>
  <title>select.suggest</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap -->
  <script src="js/jquery-1.10.2.js"></script>
  <script src="js/jquery.select.js"></script>
  </head>
  <body>
  <h1>Hello, world!</h1>
  <div>
   <div>
   <div>.col-md-1
   </div>
   <div style="">
    <input id="testInput" type="text" />
   </div>
   </div>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  </body>
  <script type="text/javascript">
  var datas =[{"id":"2","text":"中国石油"}, 
  {"id":"4","text":"中国建筑"},
  {"id":"3","text":"中国移动"},
  {"id":"5","text":"中国工商银行"},
  {"id":"7","text":"中国铁建"},
  {"id":"8","text":"上海汽车集团"},
  {"id":"9","text":"中国建设银行"},
  {"id":"10","text":"联想集团"}];
  var itemSelectFuntion = function(){
   alert(this.id + "," + this.innerHTML);
  };
  $.selectSuggest('testInput',datas,itemSelectFuntion);
  </script>
 </html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 #Javascript
Angular2 PrimeNG分页模块学习
Jan 14 #Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 #Javascript
详解jQuery事件
Jan 13 #Javascript
js实现固定宽高滑动轮播图效果
Jan 13 #Javascript
JavaScript利用闭包实现模块化
Jan 13 #Javascript
Vue.js基础知识小结
Jan 13 #Javascript
You might like
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
整理Python中的赋值运算符
2015/05/13 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python简单实现控制电脑的方法
2018/01/22 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
创业女性典型材料
2014/05/02 职场文书
主要领导对照检查材料
2014/08/26 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书