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

上官大大

已于 2022-03-19 19:06:14 修改

阅读量1.3k

点赞数 1

文章标签： angularjs html 前端

于 2022-03-19 19:05:32 首次发布

本文链接：https://blog.csdn.net/haoshangguan/article/details/123600152

版权

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

首先说一下这个步骤：

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

代码如下：

<!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>