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>