溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
怎么在Angular中實現一個下拉框模糊查詢功能？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
1. 普通方式實現
<!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 >
<div ng-app="myApp" ng-controller="myCtrl">
<input type = 'test' ng-change="changeKeyValue(searchField)" ng-model="searchField" style = 'display:block;width:200px' ng-click = 'hidden=!hidden' value="{{searchField}}"/></input>
<div ng-hide="hidden">
<select style = 'width:200px' ng-change="change(x)" ng-model="x" multiple>
<option ng-repeat="data in datas" >{{data}}</option>
</select>
</div>
</div>
<div>
<p><h2>angular輸入選擇框</h2></p>
<p><h3>邏輯實現步驟</h3></p>
<p>1文本框做輸入，并監控器change事件，在change事件中獲取輸入值，獲取的輸入值與選擇框中的各個下拉項進行比較</p>
<p>2如果包含則只顯示包含的部分，不包含則顯示全部</p>
<div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.datas = ["key4","xyz","key3","xxxx","key2","value2","key1","value1"]; //下拉框選項
$scope.tempdatas = $scope.datas; //下拉框選項副本
$scope.hidden=true;//選擇框是否隱藏
$scope.searchField='';//文本框數據
//將下拉選的數據值賦值給文本框
$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 || ''==v){
$scope.datas=$scope.tempdatas;
}
console.log($scope.datas);
}
});
</script>
</html>2. 指令方式實現
<!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 >
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<select-search datas="datas"></select-search>
</div>
</div>
<div>
<p><h2>angular輸入選擇框 自定義指令方式</h2></p>
<p><h3>邏輯實現步驟</h3></p>
<p>1文本框做輸入，并監控器change事件，在change事件中獲取輸入值，獲取的輸入值與選擇框中的各個下拉項進行比較</p>
<p>2如果包含則只顯示包含的部分，不包含則顯示全部</p>
<div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.datas = ["key4","xyz","key3","xxxx","key2","value2","key1","value1"]; //下拉框選項
});
app.directive('selectSearch', function($compile) {
return {
restrict: 'AE', //attribute or element
scope: {
datas: '=',
//bindAttr: '='
},
template:
'<input type = "test" ng-change="changeKeyValue(searchField)" ng-model="searchField" style = "display:block;width:200px" '+
'ng-click = "hidden=!hidden" value="{{searchField}}"/></input>'+
'<div ng-hide="hidden">'+
' <select style = "width:200px" ng-change="change(x)" ng-model="x" multiple>'+
' <option ng-repeat="data in datas" >{{data}}</option>'+
' </select>'+
'</div>',
// replace: true,
link: function($scope, elem, attr, ctrl) {
$scope.tempdatas = $scope.datas; //下拉框選項副本
$scope.hidden=true;//選擇框是否隱藏
$scope.searchField='';//文本框數據
//將下拉選的數據值賦值給文本框
$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 || ''==v){
$scope.datas=$scope.tempdatas;
}
console.log($scope.datas);
}
}
};
});
</script>
</html>看完上述內容，你們掌握怎么在Angular中實現一個下拉框模糊查詢功能的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
