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*（[sS]+?）（?:s+ass+（[sS]+?））?（?:s+groups+bys+（[sS]+?））?（?:s+disables+whens+（[sS]+?））?s+fors+（?:（[$w][$w]*）|（?:（s*（[$w][$w]*）s*,s*（[$w][$w]*）s*）））s+ins+（[sS]+?）（?:s+tracks+bys+（[sS]+?））?$/; 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来存数据。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。