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 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 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过滤危险html代码的函数
2008/07/22 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
PHP实现简单日历类编写
2020/08/28 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
python生成excel的实例代码
2017/11/08 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
python实现一个猜拳游戏
2020/04/05 Python
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
super()与this()的区别
2016/01/17 面试题
Linux Interview Questions For software testers
2012/06/02 面试题
电子技术专业中专生的自我评价
2013/12/17 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
举起手来观后感
2015/06/09 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
晚会开幕词范文
2016/03/04 职场文书