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中void(0)的具体含义解释
Feb 27 Javascript
让你的网站可编辑的实现js代码
Oct 19 Javascript
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
jQuery bind事件使用详解
May 05 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
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获取网页上所有链接的方法
2015/04/03 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
iView框架问题整理小结
2018/10/16 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
Python中几种操作字符串的方法的介绍
2015/04/09 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
通过Python实现一个简单的html页面
2020/05/16 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
美国网上订购鲜花:FTD
2016/09/23 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
运动会入场词200字
2014/02/15 职场文书
五一手机促销方案
2014/03/08 职场文书
售后求职信范文
2014/03/15 职场文书
财务情况说明书范文
2014/05/06 职场文书
个人安全生产承诺书
2014/05/22 职场文书
酒店节能减排方案
2014/05/26 职场文书
优秀应届生求职信
2014/06/16 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
党组织结对共建协议书
2016/03/23 职场文书
PHP解决高并发问题
2021/04/01 PHP
Python极值整数的边界探讨分析
2021/09/15 Python
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL