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>
<head lang="zh_CN">
    <meta charset="utf-8">
    <script src="" type="text/javascript"></script>
    <link href="" rel="stylesheet">
    <script src=""></script>
    <script src=""></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <input type = 'text' ng-model="searchField"
           style = 'display:block;width:200px' ng-click = 'hidden=!hidden'
    {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">{
    <button ng-click="save()" style="width: 50px;height: 30px">

    <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>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.datas = [{
    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.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 
                    // Give the name of the object selected in the drop-down box to the... In the search box model
                    // Call the function of the find drop-down list of the search box 
                // 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 
                    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 
                            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 
                    // Drop down to show 
                    // 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){
                var major = [];
                //save when , stay datas Search inside , If there is , Just add , Otherwise, the addition fails 
                $ = function () {
                    if ($scope.x == null || $scope.x == {
                        alert(" New cannot be empty ");
                    var object = {
                    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 !');
                            object = $scope.datas[i];

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.

Random recommended