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 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>' + '<div><span></span><i></i></div>' + '<div>' + '<div>' + '<input type="text" autocomplete="off">' + '</div>' + '<ul>' + // '<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写的，以下是编译后的)