angularjs 实现带查找筛选功能的select下拉框实例
程序员文章站
2023-09-09 13:20:55
一.背景
对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非...
一.背景
对于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来存数据。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。