欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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>

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

2.详细说明

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

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