Angularjs implements select drop-down box sample code with search and filter function

前言

对于select的下拉列表，像国家选择这样的功能，全世界那么多国家，一直拉滚动条多辛苦，眼睛也要盯着找，累！所以为优化用户体验，带查找功能的下拉框是非常非常有必要的。都知道jquery里有这样的插件，但我们用的是Angularjs,更希望用双向绑定，指令的方式优雅地解决这个问题。

分析

我们的目标是在原来的标签上新加一个属性 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(&#39;ngcSelectSearch&#39;, 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(&#39;ng-options 表达式有误&#39;)
     }
     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 = {
           &#39;optionValues&#39;: optionValues,
           &#39;labelArray&#39;: labelArray,
           &#39;idArray&#39;: idArray
         }
       }
     });
   }
   return {
     restrict: &#39;A&#39;,
     require: [&#39;ngModel&#39;],
     priority: 100,
     replace: false,
     scope: true,
     template: &#39;<div class="chose-container">&#39; +
       &#39;<div class="chose-single"><span class="j-view"></span><i class="glyphicon glyphicon-remove"></i></div>&#39; +
       &#39;<div class="chose-drop chose-hide j-drop">&#39; +
       &#39;<div class="chose-search">&#39; +
       &#39;<input class="j-key" type="text" autocomplete="off">&#39; +
       &#39;</div>&#39; +
       &#39;<ul class="chose-result">&#39; +
       // &#39;<li ng-repeat="&#39;+repeatTempl+&#39;" data-id="&#39;+keyTempl+&#39;" >{{&#39;+ valueTempl+&#39;}}</li>&#39;+
       &#39;</ul>&#39; +
       &#39;</div>&#39; +
       &#39;</div>&#39;,
     link: {
       pre: function selectSearchPreLink(scope, element, attr, ctrls) {
 
         var tmplNode = $(this.template).first();
 
         var modelName = attr.ngModel,
           name = attr.name? attr.name:(&#39;def&#39;+Date.now());
         tmplNode.attr(&#39;id&#39;, name + &#39;_chosecontianer&#39;);
 
         $animate.enter(tmplNode, element.parent(), element);
       },
       post: function selectSearchPostLink(scope, element, attr, ctrls) {
         var choseNode = element.next(); //$(&#39;#&#39;+attr.name +&#39;_chosecontianer&#39;);
         choseNode.addClass(attr.class);
         element.addClass(&#39;chose-hide&#39;);
         // 当前选中项
         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 = &#39;&#39;;
             choseNode.find(&#39;.j-view:first&#39;).text(&#39;请选择&#39;);
             choseNode.find(&#39;i&#39;).addClass(&#39;chose-hide&#39;);
           }
           if ((currentKey + &#39;&#39;).length > 0) {
             for (var i = 0, l = rs.idArray.length; i < l; i++) {
               if (rs.idArray[i] == currentKey) {
                 choseNode.find(&#39;.j-view:first&#39;).text(rs.labelArray[i]);
                 choseNode.find(&#39;i&#39;).removeClass(&#39;chose-hide&#39;);
                 break;
               }
             }
           }
         }
 
         function setViewAndData() {
           if (!scope.options) {
             return;
           }
           rs = scope.options;
           setView();
         }
         scope.$watchCollection(&#39;options&#39;, 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($(&#39;<li>&#39;).data(&#39;id&#39;, rs.idArray[i]).text(rs.labelArray[i]))
             }
           }
           return nodes;
 
         }
         choseNode.on(&#39;keyup&#39;, &#39;.j-key&#39;, function() {
           // 搜索输入框keyup，重新筛选列表
           var value = $(this).val();
           choseNode.find(&#39;ul:first&#39;).empty().append(getListNodes(value));
           return false;
         }).on(&#39;click&#39;, function() {
           choseNode.find(&#39;.j-drop&#39;).removeClass(&#39;chose-hide&#39;);
           if (choseNode.find(&#39;.j-view:first&#39;).text() != &#39;请选择&#39;) {
             choseNode.find(&#39;i&#39;).removeClass(&#39;chose-hide&#39;);
           }
           choseNode.find(&#39;ul:first&#39;).empty().append(getListNodes(choseNode.find(&#39;.j-key&#39;).val()));
           return false;
         }).on(&#39;click&#39;, &#39;ul>li&#39;, function() {
           var _this = $(this);
           ngModelCtrl.$setViewValue(_this.data(&#39;id&#39;));
           ngModelCtrl.$render();
           choseNode.find(&#39;.j-drop&#39;).addClass(&#39;chose-hide&#39;);
           return false;
 
         }).on(&#39;click&#39;, &#39;i&#39;, function() {
           ngModelCtrl.$setViewValue(&#39;&#39;);
           ngModelCtrl.$render();
           choseNode.find(&#39;.j-view:first&#39;).text(&#39;请选择&#39;);
           return false;
 
         });
         $(document).on("click", function() {
           $(&#39;.j-drop&#39;).addClass(&#39;chose-hide&#39;);
           choseNode.find(&#39;i&#39;).addClass(&#39;chose-hide&#39;);
           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来存数据。

总结

以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

更多Angularjs实现带查找筛选功能的select下拉框示例代码相关文章请关注PHP中文网！

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7509

15

CakePHP Tutorial

1378

52

What is the format of the account name of steam

78

11

win11 activation key permanent

52

19

nyt connections hints and answers

19

60

Show More

Related knowledge

How do I create and publish my own JavaScript libraries? Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

How do I optimize JavaScript code for performance in the browser? Mar 18, 2025 pm 03:14 PM

The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.

What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

How do I debug JavaScript code effectively using browser developer tools? Mar 18, 2025 pm 03:16 PM

The article discusses effective JavaScript debugging using browser developer tools, focusing on setting breakpoints, using the console, and analyzing performance.

Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

How do I use source maps to debug minified JavaScript code? Mar 18, 2025 pm 03:17 PM

The article explains how to use source maps to debug minified JavaScript by mapping it back to the original code. It discusses enabling source maps, setting breakpoints, and using tools like Chrome DevTools and Webpack.

Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts Mar 15, 2025 am 09:19 AM

This tutorial will explain how to create pie, ring, and bubble charts using Chart.js. Previously, we have learned four chart types of Chart.js: line chart and bar chart (tutorial 2), as well as radar chart and polar region chart (tutorial 3). Create pie and ring charts Pie charts and ring charts are ideal for showing the proportions of a whole that is divided into different parts. For example, a pie chart can be used to show the percentage of male lions, female lions and young lions in a safari, or the percentage of votes that different candidates receive in the election. Pie charts are only suitable for comparing single parameters or datasets. It should be noted that the pie chart cannot draw entities with zero value because the angle of the fan in the pie chart depends on the numerical size of the data point. This means any entity with zero proportion

TypeScript for Beginners, Part 2: Basic Data Types Mar 19, 2025 am 09:10 AM

Once you have mastered the entry-level TypeScript tutorial, you should be able to write your own code in an IDE that supports TypeScript and compile it into JavaScript. This tutorial will dive into various data types in TypeScript. JavaScript has seven data types: Null, Undefined, Boolean, Number, String, Symbol (introduced by ES6) and Object. TypeScript defines more types on this basis, and this tutorial will cover all of them in detail. Null data type Like JavaScript, null in TypeScript

See all articles

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved