使用angularJs进行模糊动态查找下拉框内容

如何使用angularJs进行模糊动态查找下拉框内容

首先说一下这个步骤:

  1. 首先是这个数组存储的是一个对象的数组,这个是我们下拉框的内容来源。
  2. 然后对这个数组需要进行下拉选择时需要显示的属性把那个属性的字符串存储在一个字符串数组中,然后留一个备份。
  3. 然后输入框内输入内容时,当用户回车,会对输入内容在数组中进行查找,然后把包含输入的字符串的内容显示在下拉框中,如果不存在,则返回所有的。
  4. 然后选择下拉框中的选项,选项的内容就会到输入框中。
  5. 点击按钮,就会将该内容对应的整个内容加入到数组中。

代码如下:

<!DOCTYPE html>
<html>
<head lang="zh_CN">
    <meta charset="utf-8">
    <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="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 = 'text' ng-model="searchField"
           style = 'display:block;width:200px' ng-click = 'hidden=!hidden'
           value="{{searchField}} " ng-keypress="($event.which === 13)?changeKeyValue(searchField):0">
    <div  ng-hide="hidden">
        <select style = 'width:200px' ng-change="change(x)" ng-model="x" multiple>
            <option ng-repeat="x in datas2">{{x}}</option>
        </select>
    </div>
    <button ng-click="save()" style="width: 50px;height: 30px">
    </button>
</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 = [{name:'kkkkk',id:'1'},{name:'kghshdj',id:'2'},{name:'kgushdu',id:'3'},{name:'你好',id:'4'},
                    {name:'我好',id:'5'},{name:'大家好',id:'6'}]; //下拉框选项
                $scope.templates = [];
                $scope.datas2 = [];
                for(var i = 0;i < $scope.datas.length; i++){
                    $scope.templates.push($scope.datas[i].name);
                    $scope.datas2.push($scope.datas[i].name);
                 }
                $scope.hidden=true;//选择框是否隐藏
                $scope.searchField='';//文本框数据
                //将下拉选的数据值赋值给文本框
                $scope.change=function(x){
                    //把下拉框选择的对象名字给搜索框的model
                    console.log(x);
                    $scope.searchField=x;
                    $scope.hidden=true;
                    //调用搜索框的查找下拉列表的函数
                    $scope.changeKeyValue(x);
                    //console.log($scope.searchField);
                }
                //获取的数据值与下拉选逐个比较,如果包含则会将对象的name属性放在临时变量副本,并用临时变量副本替换下拉选原先的数值,如果数据为空或找不到,就用初始下拉选项副本替换
                $scope.changeKeyValue=function(v){
                    //console.log(v);
                    var newDate=[];//临时下拉选副本
                    //如果包含就添加
                    //foreach是data是数据项=array[index],循环的是datas这个数组
                    angular.forEach($scope.templates ,function(data,index,array){
                        //indexOf()方法返回某个指定的字符串值在字符串中首次出现的位置
                        if(data.indexOf(v)>=0){
                            newDate.unshift(data);//unshift是将新项添加到数组的开头,返回新的长度
                        }
                    });
                    //用下拉选副本替换原来的数据
                    $scope.datas2=newDate;
                    //下拉选展示
                    $scope.hidden=false;
                    //如果不包含或者输入的是空字符串则用初始变量副本做替换
                    if($scope.datas2.length == 0 || ''==v){
                        $scope.datas2=$scope.templates;
                    }
                    //console.log($scope.datas);
                }
                var major = [];
                //save时,在datas里面进行查找,如果有,就进行添加,否则就添加失败
                $scope.save = function () {
                    if ($scope.x == null || $scope.x == {}){
                        alert("新增不能为空");
                        return;
                    }
                    var object = {};
                    console.log($scope.searchField);
                    var flag=0;
                    for(var i = 0 ;i < $scope.datas.length; i++){
                        //检查是否是用户随意输入
                        if($scope.searchField == $scope.datas[i].name){
                            for(var j = 0;j < major.length; j++){
                                //检查是否重复,重复则终止
                                if($scope.searchField == major[j].name) {
                                    alert('已重复!');
                                    return;
                                }
                            }
                            object = $scope.datas[i];
                            major.push(object);
                            console.log(major);
                        }
                    }
                }
            });
        </script>
</body>
</html>

演示效果如下:
在这里插入图片描述
不过这里有一个bug,就是你在查找的内容没变时,你的这个再点击这个下拉框的选项是不会同步到这个输入框中的,演示:
在这里插入图片描述
望指正。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值