怎么样使用jQuery实现select模糊查询功能?

怎么样使用jQuery实现select模糊查询功能?

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

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