Heim > Artikel > Web-Frontend > So implementieren Sie die Fuzzy-Abfragefunktion im Dropdown-Feld in Angular

So implementieren Sie die Fuzzy-Abfragefunktion im Dropdown-Feld in Angular

亚连Original: 2018-06-13 18:00:432575Durchsuche

In diesem Artikel wird hauptsächlich die Implementierung der Dropdown-Box-Fuzzy-Abfragefunktion vorgestellt, die AngularJS-Ereignisantwort und Zeichenfolgenabfrage sowie andere verwandte Betriebsfähigkeiten umfasst. Freunde in Not können sich darauf beziehen

Das Beispiel dieses Artikels Beschreibt die Implementierung des Dropdown-Felds in der Angular Fuzzy-Abfragefunktion. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Ich habe vor zwei Tagen AngularJS studiert und muss sagen, dass die MVC-Idee von AngularJS immer noch sehr mächtig ist. Es ist immer noch sehr vorteilhaft für Projekte, die sich auf die Datenverarbeitung konzentrieren.

Ich habe eine Demo eines Such-Dropdown-Felds geschrieben, in das ich alle Kommentare geschrieben habe, damit es nicht mehr so wortreich wird.

1. Gewöhnliche Art der Implementierung

<!DOCTYPE html>
<html>
<head lang="zh_CN">
<meta charset="utf-8">
<title>www.jb51.net Angular模糊匹配</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body >
<p ng-app="myApp" ng-controller="myCtrl">
 <input type = &#39;test&#39; ng-change="changeKeyValue(searchField)" ng-model="searchField" style = &#39;display:block;width:200px&#39; ng-click = &#39;hidden=!hidden&#39; value="{{searchField}}"/></input>
 <p ng-hide="hidden">
  <select style = &#39;width:200px&#39; ng-change="change(x)" ng-model="x" multiple>
   <option ng-repeat="data in datas" >{{data}}</option>
  </select>
 </p>
</p>
<p>
<p><h1>angular输入选择框</h1></p>
<p><h2>逻辑实现步骤</h2></p>
<p>1文本框做输入，并监控器change事件，在change事件中获取输入值，获取的输入值与选择框中的各个下拉项进行比较</p>
<p>2如果包含则只显示包含的部分，不包含则显示全部</p>
<p>
<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
 $scope.datas = ["key4","xyz","key3","xxxx","key2","value2","key1","value1"]; //下拉框选项
 $scope.tempdatas = $scope.datas; //下拉框选项副本
 $scope.hidden=true;//选择框是否隐藏
 $scope.searchField=&#39;&#39;;//文本框数据
 //将下拉选的数据值赋值给文本框
 $scope.change=function(x){
  $scope.searchField=x;
  $scope.hidden=true;
 }
 //获取的数据值与下拉选逐个比较，如果包含则放在临时变量副本，并用临时变量副本替换下拉选原先的数值，如果数据为空或找不到，就用初始下拉选项副本替换
 $scope.changeKeyValue=function(v){
  var newDate=[]; //临时下拉选副本
  //如果包含就添加
  angular.forEach($scope.datas ,function(data,index,array){
   if(data.indexOf(v)>=0){
    newDate.unshift(data);
   }
  });
  //用下拉选副本替换原来的数据
  $scope.datas=newDate;
  //下拉选展示
  $scope.hidden=false;
  //如果不包含或者输入的是空字符串则用初始变量副本做替换
  if($scope.datas.length==0 || &#39;&#39;==v){
   $scope.datas=$scope.tempdatas;
  }
  console.log($scope.datas);
 }
});
</script>
</html>

2. Befehlsweise zur Implementierung

<!DOCTYPE html>
<html>
<head lang="zh_CN">
<meta charset="utf-8">
<title>www.jb51.net Angular模糊匹配</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body >
<p ng-app="myApp" ng-controller="myCtrl">
 <p>
  <select-search datas="datas"></select-search>
 </p>
</p>
<p>
<p><h1>angular输入选择框 自定义指令方式</h1></p>
<p><h2>逻辑实现步骤</h2></p>
<p>1文本框做输入，并监控器change事件，在change事件中获取输入值，获取的输入值与选择框中的各个下拉项进行比较</p>
<p>2如果包含则只显示包含的部分，不包含则显示全部</p>
<p>
<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
  $scope.datas = ["key4","xyz","key3","xxxx","key2","value2","key1","value1"]; //下拉框选项
});
app.directive(&#39;selectSearch&#39;, function($compile) {
 return {
 restrict: &#39;AE&#39;, //attribute or element
 scope: {
  datas: &#39;=&#39;,
  //bindAttr: &#39;=&#39;
 },
 template:
 &#39;<input type = "test" ng-change="changeKeyValue(searchField)" ng-model="searchField" style = "display:block;width:200px" &#39;+
 &#39;ng-click = "hidden=!hidden" value="{{searchField}}"/></input>&#39;+
 &#39;<p ng-hide="hidden">&#39;+
 &#39; <select style = "width:200px" ng-change="change(x)" ng-model="x" multiple>&#39;+
 &#39;  <option ng-repeat="data in datas" >{{data}}</option>&#39;+
 &#39; </select>&#39;+
 &#39;</p>&#39;,
 // replace: true,
 link: function($scope, elem, attr, ctrl) {
  $scope.tempdatas = $scope.datas; //下拉框选项副本
  $scope.hidden=true;//选择框是否隐藏
  $scope.searchField=&#39;&#39;;//文本框数据
 //将下拉选的数据值赋值给文本框
  $scope.change=function(x){
   $scope.searchField=x;
   $scope.hidden=true;
  }
 //获取的数据值与下拉选逐个比较，如果包含则放在临时变量副本，并用临时变量副本替换下拉选原先的数值，如果数据为空或找不到，就用初始下拉选项副本替换
  $scope.changeKeyValue=function(v){
   var newDate=[]; //临时下拉选副本
  //如果包含就添加
   angular.forEach($scope.datas ,function(data,index,array){
    if(data.indexOf(v)>=0){
     newDate.unshift(data);
    }
   });
  //用下拉选副本替换原来的数据
   $scope.datas=newDate;
  //下拉选展示
   $scope.hidden=false;
  //如果不包含或者输入的是空字符串则用初始变量副本做替换
   if($scope.datas.length==0 || &#39;&#39;==v){
    $scope.datas=$scope.tempdatas;
   }
   console.log($scope.datas);
  }
 }
 };
});
</script>
</html>

Der endgültige Effekt ist wie folgt:

Beachten Sie, dass das Mehrfachattribut hier auf das Select-Tag festgelegt ist, sodass das Eingabe-Tag auf der Seite überschreiben kann das Select-Tag

Wenn Sie das Multiple-Attribut nicht benötigen, müssen Sie p verwenden, um den Select-Tag-Effekt selbst zu simulieren

Das Obige ist, was ich für alle zusammengestellt habe in Zukunft für alle hilfreich sein.

Verwandte Artikel:

So implementieren Sie den auf die Maus reagierenden Taobao-Animationseffekt in jQuery

So implementieren Sie mit jQuery den auf die Maus reagierenden Effekt Transparenzgradient Animationseffekt

Wie man NaN beurteilt

in JavaScript

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Fuzzy-Abfragefunktion im Dropdown-Feld in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript mvc jquery angular select 字符串事件 input

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie die für die Anmeldung erforderliche gleitende Überprüfung in jsNächster Artikel：So implementieren Sie die für die Anmeldung erforderliche gleitende Überprüfung in js

In Verbindung stehende Artikel

Mehr sehen