angularjs 實(shí)現(xiàn)帶查找篩選功能的select下拉框?qū)嵗?/h1>

 更新時(shí)間：2017年01月11日 15:08:15   作者：茜瓜  

本篇文章主要介紹了angularjs 實(shí)現(xiàn)帶查找篩選功能的select下拉框?qū)嵗哂幸欢ǖ膮⒖純r(jià)值，感興趣的小伙伴們可以參考一下。

一.背景

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

分析：

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

二.具體實(shí)現(xiàn)

1.代碼部分

1.1 js代碼(請(qǐng)引先引入jquery，不然會(huì)報(bào)錯(cuò))

/**
 * 帶篩選功能的下拉框
 * 使用方法 <select ngc-select-search name="select1" ng-options="">
 * 說(shuō)明[ 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 表達(dá)式有誤')
   }
   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');
     // 當(dāng)前選中項(xiàng)
     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('請(qǐng)選擇');
       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() != '請(qǐng)選擇') {
       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('請(qǐng)選擇');
      return false;

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

    }
   }
  };
 })

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

.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="">請(qǐng)選擇</option>
</select>

2.詳細(xì)說(shuō)明

程序中的關(guān)鍵點(diǎn)是parseOptions函數(shù)，即前面分析里的問(wèn)題1。parseOptions是參考ng-options的源碼實(shí)現(xiàn)的，原來(lái)是想返回一個(gè)對(duì)象，這個(gè)對(duì)象里包含了數(shù)據(jù)源，但是在調(diào)試時(shí)，發(fā)現(xiàn)post函數(shù)中該函數(shù)返回對(duì)象里的數(shù)據(jù)為空，watch不到，所以改為用scope.options來(lái)存數(shù)據(jù)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

• AngularJS動(dòng)態(tài)生成select下拉框的方法實(shí)例
• angularjs 動(dòng)態(tài)從后臺(tái)獲取下拉框的值方法
• angularJs-$http實(shí)現(xiàn)百度搜索時(shí)的動(dòng)態(tài)下拉框示例
• AngularJS中下拉框的高級(jí)用法示例
• AngularJS中下拉框的基本用法示例
• Angularjs實(shí)現(xiàn)下拉框聯(lián)動(dòng)的示例代碼
• angularjs下拉框空白的解決辦法
• Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框示例代碼
• AngularJS使用ng-repeat指令實(shí)現(xiàn)下拉框
• AngularJS實(shí)現(xiàn)多級(jí)下拉框

• angularjs
• 下拉框篩選

相關(guān)文章

• 

  AngularJS實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫(huà)矩形框示例【可兼容IE8】

  這篇文章主要介紹了AngularJS實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫(huà)矩形框,涉及基于AngularJS的事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

  2019-05-05
• 

  Angular2中監(jiān)聽(tīng)數(shù)據(jù)更新的方法

  今天小編就為大家分享一篇Angular2中監(jiān)聽(tīng)數(shù)據(jù)更新的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

  2018-08-08
• 

  angular4中關(guān)于表單的校驗(yàn)示例

  本篇文章主要介紹了angular4中關(guān)于表單的校驗(yàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

  2017-10-10

• 這篇文章主要介紹了AngularJS中的作用域,結(jié)合實(shí)例形式較為詳細(xì)的分析了AngularJS涉及作用域的相關(guān)問(wèn)題與注意事項(xiàng),需要的朋友可以參考下

  2018-05-05

Angular ng-repeat遍歷渲染完頁(yè)面后執(zhí)行其他操作詳細(xì)介紹

這篇文章主要介紹了Angular ng-repeat遍歷渲染完頁(yè)面后執(zhí)行其他操作詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下

2016-12-12

Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法示例

這篇文章主要介紹了Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法,結(jié)合實(shí)例形式分析了Angular基于外部JS調(diào)用控制器中方法與變量的具體實(shí)現(xiàn)步驟與相關(guān)技巧,需要的朋友可以參考下

2016-08-08

解決angular2 獲取到的數(shù)據(jù)無(wú)法實(shí)時(shí)更新的問(wèn)題

今天小編就為大家分享一篇解決angular2 獲取到的數(shù)據(jù)無(wú)法實(shí)時(shí)更新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

2018-08-08

手動(dòng)初始化Angular的模塊與控制器

本文主要介紹了手動(dòng)初始化Angular的模塊與控制器的方法，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧

2016-12-12

angular將html代碼輸出為內(nèi)容的實(shí)例

今天小編就為大家分享一篇angular將html代碼輸出為內(nèi)容的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

2018-09-09

Angular4自制一個(gè)市縣二級(jí)聯(lián)動(dòng)組件示例

本篇文章主要介紹了Angular4自制一個(gè)市縣二級(jí)聯(lián)動(dòng)組件示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

2017-11-11