Angularjs implémente un exemple de code de sélection d'une boîte déroulante avec une fonction de recherche et de filtrage

前言

对于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;
         });
 
       }
     }
   };
 })

Copier après la connexion

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;
}

Copier après la connexion

使用及效果

<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>

Copier après la connexion

详细说明

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

总结

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

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

Étiquettes associées：

angularjs 下拉框 筛选

source：php.cn

Article précédent：Explication détaillée de la limitation des fonctions qui déclenche l'événement onScroll en JavaScript Article suivant：AngularJS utilise la directive ng-repeat pour implémenter les listes déroulantes

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

• Exemples de paramètres HTML pour les effets de police gras, italique, souligné, barré et autres
  1970-01-01 08:00:00
• 实现一个 Java 版的 Redis
  1970-01-01 08:00:00
• La démo d'applet WeChat la plus simple
  1970-01-01 08:00:00
• Introduction aux méthodes de fonctionnement simples de pandas.DataFrame (créer, indexer, ajouter et supprimer) en python
  1970-01-01 08:00:00
• WeChat Mini Program : Exemple de mise en œuvre de l'effet d'onglets
  1970-01-01 08:00:00
• Python construit des méthodes personnalisées pour embellir la sortie de la structure du dictionnaire
  1970-01-01 08:00:00
• HTML5 : utilisez Canvas pour traiter la vidéo en temps réel
  1970-01-01 08:00:00
• Asp.net utilise SignalR pour envoyer des images
  1970-01-01 08:00:00
• Tutoriel de développement de programmes WeChat Mini-App() et Page() Présentation des fonctions
  1970-01-01 08:00:00
• Explication détaillée de l'utilisation de Python Redis
  1970-01-01 08:00:00

Derniers numéros

Personnalisez l'apparence de Select2 Dropdown Dans mon cas, j'utilise select2Combobox pour mon menu déroulant. Ici, lorsque la sélection...

Depuis 2024-04-03 11:27:22

0

1

338

Rubriques connexes

Plus>

• Utilisation de la fonction qsort
• utilisation de location.reload
• Que sont les bases de données non relationnelles ?
• Comment effacer le flotteur en CSS
• Quel est le problème avec le déclenchement de l'interrupteur pneumatique ?
• Comment ouvrir les fichiers .dat
• Comment acheter et vendre du Bitcoin sur Binance
• Méthodes pour prévenir les attaques CC

Recommandations populaires

• que signifie js
• Comment convertir une chaîne en tableau en js ?
• Comment actualiser la page en utilisant javascript
• Comment supprimer un élément dans le tableau js
• Comment utiliser la fonction sqrt

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1423503
• 
  Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine

  4269038
• 
  Tutoriel vidéo JAVA pour débutants

  2538872
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  507671
• 
  Tutoriel d'introduction PHP base zéro

  862906

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1423503 temps d'étude
• 
  Tutoriel vidéo JAVA pour débutants

  2538872 temps d'étude
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  507671 temps d'étude
• 
  Introduction rapide au développement web front-end

  215884 temps d'étude
• 
  Maîtrisez les didacticiels vidéo PS à partir de zéro

  890617 temps d'étude

• 
  [Web front-end] Démarrage rapide de Node.js

  7482 temps d'étude
• 
  Collection complète de cours full-stack de développement Web étranger

  5986 temps d'étude
• 
  Aller au langage pratique GraphQL

  4944 temps d'étude
• 
  Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape

  699 temps d'étude
• 
  Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures

  24841 temps d'étude

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

• [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery
• [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3
• [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5
• [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery
• [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS
• [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique
• [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image
• [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

• [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)
• [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)
• [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)
• [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes
• [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)
• [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet