Angularjs实现带查找筛选功能的select下拉框示例代

关于AngularJS中Select下拉框实现查找筛选功能的全及实例教程

随着Web应用的复杂性不断提高，用户体验成为开发者不可忽视的重要方面。想象一下，面对一个长长的国家列表，用户不得不一直滚动滚动条来查找所需的国家，这无疑是一个不太理想的体验。为此，带查找功能的下拉框成为了提高用户体验的必备工具。今天，我们将深入如何使用AngularJS来实现这一功能。

一、前言

在Web开发中，jquery里已经有了带查找功能的下拉框插件。我们使用的是Angularjs，更希望通过双向绑定和指令的方式来优雅地解决这一问题。那么，如何在原有的标签上添加一个select-search属性，使其支持查找功能呢？这就是我们今天的主题。

二、问题分析

1. 在selectSearch指令中，我们首先需要获取到ng-options里的数据源，以及指定的value（option标签的value）和text（option标签里的text）字段名。

2. 那么，我们应该如何筛选数据呢？是每次显示匹配项，隐藏不匹配项，还是每次从数据源里匹配，重新生成节点？

三、解决思路及实现

1. 对于获取数据源和value、text字段名的问题，我们可以参考Angular自带的ng-options指令。特别需要注意的是，我们的解决方案仅支持ng-options="obj.value as obj.text for obj in list"的普通形式，暂不支持分组等复杂情况。

2. 对于筛选数据的问题，我们选择重新生成节点的方式。这样做的好处在于可以方便地根据用户的输入来动态生成匹配的选项，无需对现有DOM结构进行复杂的操作。

四、具体实现步骤及示例代码

1. 创建selectSearch指令：在这里，我们将实现指令的核心逻辑，包括获取数据源、处理用户输入、重新生成节点等。

2. 在select标签上添加select-search属性：这样，当用户在select框中输入内容时，我们的指令就会生效，实现查找功能。

3. 编写示例代码：为了更直观地展示实现过程，我们将提供一段简单的示例代码，帮助读者理解和实现。

实现带筛选功能的下拉框

一、代码部分

1. JavaScript代码（请先引入jQuery，否则会出现错误）

我们创建一个名为ngcSelectSearch的指令。这个指令主要应用在带有筛选功能的下拉框上。请注意，使用此指令时，select元素必须有name和ng-options属性。

```javascript

.directive('ngcSelectSearch', function($animate, $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: '

' + '

' + '

' + '