jQuery实现select模糊查询（反射机制）

2019-11-19 17:56:21

字体：大中小

来源：转载

供稿：网友

通过如下代码就可以简单实现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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Easyui笔记2：实现datagrid多行删除的示例代码

下一篇：Angular2-primeNG文件上传模块FileUpload使用详解