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二维数组采用定义数组的数组来实现
Dec 09 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
React实现动效弹窗组件
Jun 21 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日期时间函数的高级应用技巧
2009/05/16 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
php实例化一个类的具体方法
2019/09/19 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
JS类的封装及实现代码
2009/12/02 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
跟老齐学Python之list和str比较
2014/09/20 Python
Python中的引用和拷贝浅析
2014/11/22 Python
jupyter安装小结
2016/03/13 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
pytorch forward两个参数实例
2020/01/17 Python
学习Python需要哪些工具
2020/09/04 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
军训个人总结
2015/03/03 职场文书
捐书仪式主持词
2015/07/04 职场文书