angularjs 实现带查找筛选功能的select下拉框实例

一.背景

对于select的下拉列表，像国家选择这样的功能，全世界那么多国家，一直拉滚动条多辛苦，眼睛也要盯着找，累！so，为优化用户体验，带查找功能的下拉框是非常非常有必要的。都知道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 objin list"的普通形式，那些带分组的等等，暂不支持哈。

2.重新生成结点。（为什么这么选择，方便呀！）

二.具体实现

1.代码部分

1.1 js代码(请引先引入jquery，不然会报错)

rush:js;"> /** * 带筛选功能的下拉框 * 使用方法 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);
}
}

 s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.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"><i class="glyphicon glyphicon-remove">' +
'<div class="chose-drop chose-hide j-drop">' +
'<div class="chose-search">' +
'<input class="j-key" type="text" autocomplete="off">' +
'' +
'<ul class="chose-result">' +
// '

{{'+ valueTempl+'}}

'+
'' +
'' +
'',link: {
pre: function selectSearchPreLink(scope,attr,ctrls) {

 var tmplNode = $(this.template).f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t();

 var modelName = attr.ngModel,name = attr.name? attr.name:('def'+Date.<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>());
 tmplNode.attr('id',name + '_chosecontianer');

 $animate.enter(tmplNode,element.parent(),element);
},post: function selectSearchPostLink(s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e,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;

 par<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ptions(attr.ngOptions,s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e);
 var rs = {};

 function setView() {
  var currentKey = ngModelCtrl.$modelValue;
  if (isNaN(currentKey) || !currentKey) {
   currentKey = '';
   choseNode.find('.j-view:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t').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:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t').text(rs.labelArray[i]);
     choseNode.find('i').removeClass('chose-hide');
     break;
    }
   }
  }
 }

 function setViewAndData() {
  if (!s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.options) {
   return;
  }
  rs = s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.options;
  setView();
 }
 s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$watchCollection('options',setViewAndData);
 s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$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() {
  // <a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>输入框keyup，重新筛选列表
  var value = $(this).val();
  choseNode.find('ul:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t').empty().append(getListNodes(value));
  return false;
 }).on('click',function() {
  choseNode.find('.j-drop').removeClass('chose-hide');
  if (choseNode.find('.j-view:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t').text() != '请选择') {
   choseNode.find('i').removeClass('chose-hide');
  }
  choseNode.find('ul:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t').empty().append(getListNodes(choseNode.find('.j-key').val()));
  return false;
 }).on('click','ul>li',function() {
  var _this = $(this);
  ngModelCtrl.$setViewValue(_this.data('id'));
  ngModelCtrl.<a href="https://www.jb51.cc/tag/render/" target="_blank" class="keywords">$render</a>();
  choseNode.find('.j-drop').addClass('chose-hide');
  return false;

 }).on('click','i',function() {
  ngModelCtrl.$setViewValue('');
  ngModelCtrl.<a href="https://www.jb51.cc/tag/render/" target="_blank" class="keywords">$render</a>();
  choseNode.find('.j-view:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t').text('请选择');
  return false;

 });
 $(document).on("click",function() {
  $('.j-drop').addClass('chose-hide');
  choseNode.find('i').addClass('chose-hide');
  return false;
 });

}

}
};
})

1.2 css代码(用less写的，以下是编译后的)

rush:css;"> .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 使用及效果

rush:xhtml;">

2.详细说明

程序中的关键点是parSEOptions函数，即前面分析里的问题1。parSEOptions是参考ng-options的源码实现的，原来是想返回一个对象，这个对象里包含了数据源，但是在调试时，发现post函数中该函数返回对象里的数据为空，watch不到，所以改为用scope.options来存数据。

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

相关文章

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗

前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...

nice-validator表单验证插件的简单使用

前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...

基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

前言 图片上传是web项目常见的需求，我基于之前的博客的代码...

踹掉后端，前端导出Excel！

前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...

Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量

前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...

select标签 禁止选择但又能通过序列化form表单传值到后台

前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...

Copyright © 2018 编程之家. 当前版本 V7.0.16
编程之家 版权所有 闽ICP备13020303号-8