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

327 阅读 0 评论 216 点赞

我是靠谱客的博主奋斗白开水，这篇文章主要介绍jQuery实现select模糊查询（反射机制），现在分享给大家，希望可以做个参考。

通过如下代码就可以简单实现select带模糊查询的条件查询，具体如下jquery.select.js如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
(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">
  
  <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>
  
  
  </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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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>