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 相关文章推荐
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
完美的js图片轮换效果
Feb 05 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
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加速 eAccelerator配置和使用指南
2009/06/05 PHP
php下连接mssql2005的代码
2011/01/17 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
vue内置指令详解
2018/04/03 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
如何利用Fabric自动化你的任务
2016/10/20 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
python实现手机销售管理系统
2019/03/19 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
工艺工程师岗位职责
2014/03/04 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android