Angular实现下拉框模糊查询功能示例


Posted in Javascript onJanuary 03, 2018

本文实例讲述了Angular实现下拉框模糊查询功能。分享给大家供大家参考,具体如下:

前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的。对应偏重于数据处理的项目还是非常有优势的。

写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了。

1. 普通方式实现

<!DOCTYPE html>
<html>
<head lang="zh_CN">
<meta charset="utf-8">
<title>3water.com 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><h1>angular输入选择框</h1></p>
<p><h2>逻辑实现步骤</h2></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>3water.com 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><h1>angular输入选择框 自定义指令方式</h1></p>
<p><h2>逻辑实现步骤</h2></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实现下拉框模糊查询功能示例

注意这里对select标签设置了multiple属性,所以在页面上input标签能覆盖select标签

如果不用multiple属性,需自行用div模拟实现select标签效果

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
浅谈node的事件机制
Oct 09 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 #Javascript
angularjs实现分页和搜索功能
Jan 03 #Javascript
vue引入ueditor及node后台配置详解
Jan 03 #Javascript
Node.js搭建小程序后台服务
Jan 03 #Javascript
基于js文件加载优化(详解)
Jan 03 #Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 #jQuery
js 取消页面可以选中文字的功能方法
Jan 02 #Javascript
You might like
php短信接口代码
2016/05/13 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
django迁移文件migrations的实现
2020/03/31 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
this关键字的作用
2016/01/30 面试题
生物学专业求职信
2014/07/23 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
同事离别感言
2015/08/04 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
党员公开承诺书2016
2016/03/24 职场文书
python异常中else的实例用法
2021/06/15 Python
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏