【經驗】angularjs 實現帶查找篩選功能的select下拉框

一.背景

 

---

 

對於select的下拉列表，像國家選擇這樣的功能，全世界那么多國家，一直拉滾動條多辛苦，眼睛也要盯着找，累！so，為優化用戶體驗，帶查找功能的下拉框是非常非常有必要的。都知道jquery里有這樣的插件，但我們用的是Angularjs,更希望用雙向綁定，指令的方式優雅地解決這個問題。

分析：

目標	在原來的<select ng-options="">標簽上新加一個屬性 select-search 就能支持查找的功能。如果這個屬性沒起作用，也不影響原來的select的功能。
問題	1.在selectSearch指令里，怎么獲取到ng-options里的數據源，以及指定的value（option標簽的value）和text(option標簽里的text)字段名。 2.用什么方式來篩選？是每次顯示匹配項，隱藏不匹配項還是毎次從數據源里匹配，重新生成結點。
思路	1.參考angular自帶指令ng-options來獲取數據源和value,text字段名。特別說明，僅支持ng-options="obj.value as obj.text for obj in list"的普通形式，那些帶分組的等等，暫不支持哈。  2.重新生成結點。（為什么這么選擇，方便呀！）

 

 

 

 

 

 

 二.具體實現

 

---

 

1.代碼部分

1.1 js代碼(請引先引入jquery，不然會報錯)

  /**
   * 帶篩選功能的下拉框
   * 使用方法 <select ngc-select-search name="select1" ng-options="">
   * 說明[ select 一定要有name,ng-options 屬性]
   */
  .directive('ngcSelectSearch', function($animate, $compile, $parse) {

      function parseOptions(optionsExp, element, scope) {
          // ngOptions里的正則
          var NG_OPTIONS_REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?(?:\s+disable\s+when\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?$/;

          var match = optionsExp.match(NG_OPTIONS_REGEXP);
          if (!(match)) {
              console.log('ng-options 表達式有誤')
          }
          var valueName = match[5] || match[7];
          var keyName = match[6];
          var displayFn = $parse(match[2]);
          var keyFn = $parse(match[1]);
          var valuesFn = $parse(match[8]);

          var labelArray = [],
              idArray = [],
              optionValues = [];
          scope.$watch(match[8], function(newValue, oldValue) {
              if (newValue && newValue.length > 0) {
                  optionValues = valuesFn(scope) || [];
                  labelArray = [];
                  idArray = []
                  for (var index = 0, l = optionValues.length; index < l; index++) {
                      var it = optionValues[index];
                      if (match[2] && match[1]) {
                          var localIt = {};
                          localIt[valueName] = it;
                          var label = displayFn(scope, localIt);
                          var dataId = keyFn(scope, localIt);
                          labelArray.push(label);
                          idArray.push(dataId);
                      }
                  }

                  scope.options = {
                      'optionValues': optionValues,
                      'labelArray': labelArray,
                      'idArray': idArray
                  }
              }
          });
      }
      return {
          restrict: 'A',
          require: ['ngModel'],
          priority: 100,
          replace: false,
          scope: true,
          template: '<div class="chose-container">' +
              '<div class="chose-single"><span class="j-view"></span><i class="glyphicon glyphicon-remove"></i></div>' +
              '<div class="chose-drop chose-hide j-drop">' +
              '<div class="chose-search">' +
              '<input class="j-key" type="text" autocomplete="off">' +
              '</div>' +
              '<ul class="chose-result">' +
              // '<li ng-repeat="'+repeatTempl+'" data-id="'+keyTempl+'" >{{'+ valueTempl+'}}</li>'+
              '</ul>' +
              '</div>' +
              '</div>',
          link: {
              pre: function selectSearchPreLink(scope, element, attr, ctrls) {

                  var tmplNode = $(this.template).first();

                  var modelName = attr.ngModel,
                      name = attr.name? attr.name:('def'+Date.now());
                  tmplNode.attr('id', name + '_chosecontianer');

                  $animate.enter(tmplNode, element.parent(), element);
              },
              post: function selectSearchPostLink(scope, element, attr, ctrls) {
                  var choseNode = element.next(); //$('#'+attr.name +'_chosecontianer');
                  choseNode.addClass(attr.class);
                  element.addClass('chose-hide');
                  // 當前選中項
                  var ngModelCtrl = ctrls[0];
                  if (!ngModelCtrl || !attr.name) return;

                  parseOptions(attr.ngOptions, element, scope);
                  var rs = {};

                  function setView() {
                      var currentKey = ngModelCtrl.$modelValue;
                      if (isNaN(currentKey) || !currentKey) {
                          currentKey = '';
                          choseNode.find('.j-view:first').text('請選擇');
                          choseNode.find('i').addClass('chose-hide');
                      }
                      if ((currentKey + '').length > 0) {
                          for (var i = 0, l = rs.idArray.length; i < l; i++) {
                              if (rs.idArray[i] == currentKey) {
                                  choseNode.find('.j-view:first').text(rs.labelArray[i]);
                                  choseNode.find('i').removeClass('chose-hide');
                                  break;
                              }
                          }
                      }
                  }

                  function setViewAndData() {
                      if (!scope.options) {
                          return;
                      }
                      rs = scope.options;
                      setView();
                  }
                  scope.$watchCollection('options', setViewAndData);
                  scope.$watch(attr.ngModel, setView);


                  function getListNodes(value) {
                      var nodes = [];
                      value = $.trim(value);
                      for (var i = 0, l = rs.labelArray.length; i < l; i++) {
                          if (rs.labelArray[i].indexOf(value) > -1) {
                              nodes.push($('<li>').data('id', rs.idArray[i]).text(rs.labelArray[i]))
                          }
                      }
                      return nodes;

                  }
                  choseNode.on('keyup', '.j-key', function() {
                      // 搜索輸入框keyup，重新篩選列表
                      var value = $(this).val();
                      choseNode.find('ul:first').empty().append(getListNodes(value));
                      return false;
                  }).on('click', function() {
                      choseNode.find('.j-drop').removeClass('chose-hide');
                      if (choseNode.find('.j-view:first').text() != '請選擇') {
                          choseNode.find('i').removeClass('chose-hide');
                      }
                      choseNode.find('ul:first').empty().append(getListNodes(choseNode.find('.j-key').val()));
                      return false;
                  }).on('click', 'ul>li', function() {
                      var _this = $(this);
                      ngModelCtrl.$setViewValue(_this.data('id'));
                      ngModelCtrl.$render();
                      choseNode.find('.j-drop').addClass('chose-hide');
                      return false;

                  }).on('click', 'i', function() {
                      ngModelCtrl.$setViewValue('');
                      ngModelCtrl.$render();
                      choseNode.find('.j-view:first').text('請選擇');
                      return false;

                  });
                  $(document).on("click", function() {
                      $('.j-drop').addClass('chose-hide');
                      choseNode.find('i').addClass('chose-hide');
                      return false;
                  });

              }
          }
      };
  })

 

1.2 css代碼(用less寫的，以下是編譯后的)

.chose-hide {
  position: absolute!important;
  top: -999em !important;
}
.chose-container {
  border: none!important;
  float: left;
  margin-right: 40px;
  padding: 0!important;
  position: relative;
}
.chose-container .chose-single {
  padding: 6px 12px;
  color: #333;
  width: 100%;
  border: 1px solid #eee;
  display: inline-block;
  height: 30px;
}
.chose-container .chose-single::after {
  content: '';
  position: absolute;
  border-width: 6px 3px;
  border-style: solid;
  /* border-top-color: transparent; */
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  right: 8px;
  top: 12px;
}
.chose-container .chose-single i {
  width: 12px;
  float: right;
  right: 8px;
  font-size: 12px;
  height: 12px;
  background-color: #eee;
}
.chose-container .chose-drop {
  width: 195px;
  position: absolute;
  border: 1px solid #eee;
  z-index: 1000;
  background-color: #fff;
}
.chose-container .chose-search input[type='text'] {
  margin: 0;
  padding-left: 12px;
  width: 100%;
  height: 30px;
  border: 1px solid #ccc;
  float: none;
}
.chose-container .chose-result {
  max-height: 370px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.chose-container .chose-result li {
  padding: 5px 12px;
  list-style-type: none;
}
.chose-container .chose-result li:hover {
  background-color: #e1e2e7;
}

 

1.3 使用及效果

<select ngc-select-search class="common-select" ng-model="aa.b" ng-options="obj.countryId as obj.countryCnName for obj in vm.countries" name="country">
<option value="">請選擇</option></select>

2.詳細說明

　　程序中的關鍵點是parseOptions函數，即前面分析里的問題1。parseOptions是參考ng-options的源碼實現的，原來是想返回一個對象，這個對象里包含了數據源，但是在調試時，發現post函數中該函數返回對象里的數據為空，watch不到，所以改為用scope.options來存數據。

 

　　另：碼字不易，轉載請注明出處。