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 相关文章推荐
比较简单的异步加载JS文件的代码
Jul 18 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
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 file_get_contents函数轻松采集html数据
2010/04/22 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
javascript 解析url的search方法
2010/02/09 Javascript
原生js实现日期联动
2015/01/12 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python计数排序和基数排序算法实例
2014/04/25 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python应用文件读取与登录注册功能
2019/09/23 Python
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
大学生自我评价怎样写好
2013/10/23 职场文书
美德好少年事迹材料
2014/01/19 职场文书
房屋出租协议书
2014/04/10 职场文书
教师节演讲稿
2014/05/06 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
导游词之天津古文化街
2019/11/09 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
python垃圾回收机制原理分析
2022/04/13 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers