current position:Home>Using angularjs for fuzzy dynamic search drop-down box content

Using angularjs for fuzzy dynamic search drop-down box content

2022-05-15 01:38:12Shangguan dada

How to use angularJs The contents of the drop-down box for fuzzy dynamic search

First, let's talk about this step :

  1. First, this array stores an array of objects , This is the content source of our drop-down box .
  2. Then select the attribute to be displayed when the array needs to be pulled down, and store the string of that attribute in a string array , Then leave a backup .
  3. Then when you enter the content in the input box , When the user enters , Will find the input in the array , Then display the contents of the input string in the drop-down box , If it doesn't exist , Then return all .
  4. Then select the option in the drop-down box , The contents of the options will be in the input box .
  5. Click button , The whole content corresponding to this content will be added to the array .

Code as follows :

<!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 Input selection box </h1></p>
    <p><h2> Logical implementation steps </h2></p>
    <p>1 Text box for input , Parallel monitor change event , stay change Get the input value from the event , The input value obtained is compared with each drop-down item in the selection box </p>
    <p>2 If included, only the included part is displayed , If not, all will be displayed </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:' Hello ',id:'4'},
                    {
    name:' I am good. ',id:'5'},{
    name:' Hello everyone ',id:'6'}]; // Dropdown options 
                $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;// Select whether the box is hidden 
                $scope.searchField='';// Text box data 
                // Assign the data value selected from the drop-down to the text box 
                $scope.change=function(x){
    
                    // Give the name of the object selected in the drop-down box to the... In the search box model
                    console.log(x);
                    $scope.searchField=x;
                    $scope.hidden=true;
                    // Call the function of the find drop-down list of the search box 
                    $scope.changeKeyValue(x);
                    //console.log($scope.searchField);
                }
                // The obtained data values are compared with the drop-down selections one by one , If included, the of the object will be name Property is placed in a copy of the temporary variable , And replace the original value with a copy of the temporary variable , If the data is empty or cannot be found , Just replace... With a copy of the initial drop-down option 
                $scope.changeKeyValue=function(v){
    
                    //console.log(v);
                    var newDate=[];// Temporary drop-down copy 
                    // If included, add 
                    //foreach yes data Is a data item =array[index], What's circulating is datas This array 
                    angular.forEach($scope.templates ,function(data,index,array){
    
                        //indexOf() Method returns the first occurrence of a specified string value in the string 
                        if(data.indexOf(v)>=0){
    
                            newDate.unshift(data);//unshift Is to add a new item to the beginning of the array , Return to the new length 
                        }
                    });
                    // Replace the original data with the drop-down copy 
                    $scope.datas2=newDate;
                    // Drop down to show 
                    $scope.hidden=false;
                    // If it does not contain or the input is an empty string, replace it with a copy of the initial variable 
                    if($scope.datas2.length == 0 || ''==v){
    
                        $scope.datas2=$scope.templates;
                    }
                    //console.log($scope.datas);
                }
                var major = [];
                //save when , stay datas Search inside , If there is , Just add , Otherwise, the addition fails 
                $scope.save = function () {
    
                    if ($scope.x == null || $scope.x == {
    }){
    
                        alert(" New cannot be empty ");
                        return;
                    }
                    var object = {
    };
                    console.log($scope.searchField);
                    var flag=0;
                    for(var i = 0 ;i < $scope.datas.length; i++){
    
                        // Check whether it is entered by the user at will 
                        if($scope.searchField == $scope.datas[i].name){
    
                            for(var j = 0;j < major.length; j++){
    
                                // Check for repetition , Repeat and terminate 
                                if($scope.searchField == major[j].name) {
    
                                    alert(' Duplicate !');
                                    return;
                                }
                            }
                            object = $scope.datas[i];
                            major.push(object);
                            console.log(major);
                        }
                    }
                }
            });
        </script>
</body>
</html>

The demonstration effect is as follows :
 Insert picture description here
But here's one bug, When what you're looking for hasn't changed , Your option of clicking this drop-down box will not be synchronized to this input box , demonstration :
 Insert picture description here
Hope to point out .

copyright notice
author[Shangguan dada],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120537505168.html

Random recommended