Angularjs實現帶尋找篩選功能的select下拉框範例程式碼_AngularJS

前言

對於select的下拉式清單，像國家選擇這樣的功能，全世界那麼多國家，一直拉捲軸多辛苦，眼睛也要盯著找，累！所以為最佳化使用者體驗，帶尋找功能的下拉框是非常非常有必要的。都知道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;}

使用及效果

<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>

詳細說明

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

總結

以上就是這篇文章的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流。