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 相关文章推荐
改版了网上的一个js操作userdata
Apr 27 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
jquery处理json对象
Nov 03 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
js+html获取系统当前时间
Nov 10 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
Python实现的矩阵类实例
2017/08/22 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
python 实现单例模式的5种方法
2020/09/23 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
职称自我鉴定
2013/10/15 职场文书
经典洗发水广告词
2014/03/13 职场文书
年终总结会主持词
2014/03/25 职场文书
创先争优承诺书范文
2014/03/31 职场文书
中层干部培训方案
2014/06/16 职场文书
优秀会计求职信
2014/07/04 职场文书
岗位工作说明书
2014/07/29 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
创业计划书之家政服务
2019/09/18 职场文书