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 相关文章推荐
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
node.js博客项目开发手记
Mar 16 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 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
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
python抓取网页中链接的静态图片
2018/01/29 Python
python中update的基本使用方法详解
2019/07/17 Python
Python笔试面试题小结
2019/09/07 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
python框架flask表单实现详解
2019/11/04 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
幼儿园园长自我鉴定
2013/10/22 职场文书
团队精神演讲稿
2013/12/31 职场文书
30年同学聚会感言
2014/01/30 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
科学发展观标语
2014/10/08 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
2015年工程部工作总结
2015/04/30 职场文书
旅游项目合作意向书
2015/05/08 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书