在Angular中如何实现下拉框模糊查询功能
程序员文章站
2022-03-31 17:49:10
...
这篇文章主要介绍了Angular实现下拉框模糊查询功能,涉及AngularJS事件响应及字符串查询等相关操作技巧,需要的朋友可以参考下
本文实例讲述了Angular实现下拉框模糊查询功能。分享给大家供大家参考,具体如下:
前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的。对应偏重于数据处理的项目还是非常有优势的。
写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了。
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 > <p 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> <p ng-hide="hidden"> <select style = 'width:200px' 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('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 > <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('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>'+ '<p ng-hide="hidden">'+ ' <select style = "width:200px" ng-change="change(x)" ng-model="x" multiple>'+ ' <option ng-repeat="data in datas" >{{data}}</option>'+ ' </select>'+ '</p>', // 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>
最终效果如下:
注意这里对select标签设置了multiple属性,所以在页面上input标签能覆盖select标签
如果不用multiple属性,需自行用p模拟实现select标签效果
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上就是在Angular中如何实现下拉框模糊查询功能的详细内容,更多请关注其它相关文章!
上一篇: Java多线程基础详解
下一篇: 在js中如何读取本地文件
推荐阅读
-
在JDBC中实现SQL语句的模糊查询
-
Laravel5中实现模糊匹配加多条件查询功能的方法
-
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
-
在SQL Server中,索引是一种增强式的存在,这意味着,即使没有索引,SQL Server仍然可以实现应有的功能。但索引可以在大多数情况下大大提升查询性能,
-
SQLSERVER在存储过程中如何执行模糊查询?
-
Angular实现下拉框模糊查询功能示例
-
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
-
在JDBC中实现SQL语句的模糊查询
-
在Angular中实现一个级联效果的下拉框的示例代码
-
在cropper中js通过vue的图片裁剪上传功能如何实现