Updating the search list in md-autocomplete based on the input from another md-autocomplete in AngularJS

Question

Updating the search list in md-autocomplete based on the input from another md-autocomplete in AngularJS

I am in need of assistance with updating the search list of my second <md-autocomplete> drop-down based on the selection made in the first drop-down.

You can take a look at an example plunker which is not currently functioning properly: http://plnkr.co/edit/GxQujjAcxYdawlANJd9O?p=preview

Desired behavior:
When a user selects, for instance, "This is an A" from the first drop-down, I want to update the options to $scope.numbersA, which would be [1, 2, 3]. Similarly, if someone chooses "This is a B", then the corresponding number array would be $scope.numbersB, and so on.

I have been struggling to make this functionality work as intended. In my application, there is an $http request triggered for every change in the first drop-down. As mentioned on this Stack Overflow post, I am using .then() instead of .success(). The plunker example has been simplified due to less code complexity :)

Edit: Please note that there is an issue with the searchText function in the plunker, but it functions correctly in my actual application.

javascript angularjs autocomplete angular-material

Answer 1

Answer №1

To ensure that the search handler is triggered each time the user enters a value in the second autocomplete, use the attribute md-no-cache.

Pass the selected value from the first autocomplete as an argument to the search handler of the second autocomplete.

Here's an example:

// JavaScript code snippet
var app = angular.module('app', ['ngMaterial']);

app.controller('ctrl', ['$scope',
  function($scope) {
    $scope.letters = [{
      'display': 'This is an A',
      'value': 'a'
    }, {
      'display': 'This is a B',
      'value': 'b'
    }, {
      'display': 'This is a C',
      'value': 'c'
    }];
    $scope.numbersA = [1, 2, 3];
    $scope.numbersB = [4, 5, 6];
    $scope.numbersC = [7, 8, 9];

    $scope.getMatchesLetter = function(query) {
      if (query === null || query === "" || query === undefined)
        return $scope.letters;

      var results = query ? $scope.letters.filter(createFilterFor(query)) : $scope.letters;
      return results;
    };

    $scope.getMatchesNumber = function(query, selected) {
      var arrToSearch;
      switch (selected.value.toUpperCase()) {

        case 'A':
          arrToSearch = $scope.numbersA;
          break;

        case 'B':
          arrToSearch = $scope.numbersB;
          break;

        case 'C':
          arrToSearch = $scope.numbersC;
          break;

      }
      if (query === null || query === "" || query === undefined)
        return arrToSearch;

      var results = query ? arrToSearch.filter(createFilterFor(query)) : arrToSearch;
      return results;
    };

    $scope.itemChange = function(item, whichOne) {
      switch (whichOne) {
        case 'A':
          $scope.numbersA = item;
          break;
        case 'B':
          $scope.numbersB = item;
          break;
        case 'C':
          $scope.numberC = item;
          break;
      }
    };

    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);
      return function filterFn(state) {
        //return (state.value.indexOf(lowercaseQuery) === 0); // startsWith()
        return (state.value.search(lowercaseQuery) != -1); // contains()
      };
    }

  }
]);;

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>


  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
  <script src="script.js"></script>
</head>

<body ng-app='app' ng-controller='ctrl'>
  <md-autocomplete md-selected-item="selectedItemLetter" md-search-text="searchTextLetter" md-selected-item-change="itemChange(item)" md-items="item in getMatchesLetter(searchTextLetter)" md-item-text="item.display" md-min-length="0" placeholder="Select letter">
    <md-item-template>
      <span md-highlight-text="searchTextLetter">{{item.display}}</span>
    </md-item-template>
    <md-not-found>No matches found.</md-not-found>
  </md-autocomplete>

  <br>
  <br>

  <md-autocomplete md-selected-item="selectedItemNumber" md-search-text="searchTextNum" md-selected-item-change="itemChange(item)" md-items="item in getMatchesNumber(searchTextNumber,selectedItemLetter)" md-no-cache="true" md-item-text="item" md-min-length="0"
  placeholder="Select number">
    <md-item-template>
      <span md-highlight-text="searchTextNumber">{{item}}</span>
    </md-item-template>
    <md-not-found>No matches found.</md-not-found>
  </md-autocomplete>
</body>

</html>

Answer 2

To ensure that the search handler is triggered each time the user enters a value in the second autocomplete, use the attribute md-no-cache.

Pass the selected value from the first autocomplete as an argument to the search handler of the second autocomplete.

Here's an example:

// JavaScript code snippet
var app = angular.module('app', ['ngMaterial']);

app.controller('ctrl', ['$scope',
  function($scope) {
    $scope.letters = [{
      'display': 'This is an A',
      'value': 'a'
    }, {
      'display': 'This is a B',
      'value': 'b'
    }, {
      'display': 'This is a C',
      'value': 'c'
    }];
    $scope.numbersA = [1, 2, 3];
    $scope.numbersB = [4, 5, 6];
    $scope.numbersC = [7, 8, 9];

    $scope.getMatchesLetter = function(query) {
      if (query === null || query === "" || query === undefined)
        return $scope.letters;

      var results = query ? $scope.letters.filter(createFilterFor(query)) : $scope.letters;
      return results;
    };

    $scope.getMatchesNumber = function(query, selected) {
      var arrToSearch;
      switch (selected.value.toUpperCase()) {

        case 'A':
          arrToSearch = $scope.numbersA;
          break;

        case 'B':
          arrToSearch = $scope.numbersB;
          break;

        case 'C':
          arrToSearch = $scope.numbersC;
          break;

      }
      if (query === null || query === "" || query === undefined)
        return arrToSearch;

      var results = query ? arrToSearch.filter(createFilterFor(query)) : arrToSearch;
      return results;
    };

    $scope.itemChange = function(item, whichOne) {
      switch (whichOne) {
        case 'A':
          $scope.numbersA = item;
          break;
        case 'B':
          $scope.numbersB = item;
          break;
        case 'C':
          $scope.numberC = item;
          break;
      }
    };

    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);
      return function filterFn(state) {
        //return (state.value.indexOf(lowercaseQuery) === 0); // startsWith()
        return (state.value.search(lowercaseQuery) != -1); // contains()
      };
    }

  }
]);;

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>


  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
  <script src="script.js"></script>
</head>

<body ng-app='app' ng-controller='ctrl'>
  <md-autocomplete md-selected-item="selectedItemLetter" md-search-text="searchTextLetter" md-selected-item-change="itemChange(item)" md-items="item in getMatchesLetter(searchTextLetter)" md-item-text="item.display" md-min-length="0" placeholder="Select letter">
    <md-item-template>
      <span md-highlight-text="searchTextLetter">{{item.display}}</span>
    </md-item-template>
    <md-not-found>No matches found.</md-not-found>
  </md-autocomplete>

  <br>
  <br>

  <md-autocomplete md-selected-item="selectedItemNumber" md-search-text="searchTextNum" md-selected-item-change="itemChange(item)" md-items="item in getMatchesNumber(searchTextNumber,selectedItemLetter)" md-no-cache="true" md-item-text="item" md-min-length="0"
  placeholder="Select number">
    <md-item-template>
      <span md-highlight-text="searchTextNumber">{{item}}</span>
    </md-item-template>
    <md-not-found>No matches found.</md-not-found>
  </md-autocomplete>
</body>

</html>

Updating the search list in md-autocomplete based on the input from another md-autocomplete in AngularJS

Answer №1

Similar questions

Utilizing dropzone.js with asp.net Web Forms

In a React application, the input field unexpectedly loses focus after typing just one character

How can I effectively display personalized information from an MSAccess database on a WordPress website?

Submit form data asynchronously using Ajax and serialize the form data before posting

Storing Tags with jQuery Tag-it: A guide to saving user inputted tags in an object

Using JavaScript to pass a variable into a Promise

How can elements be collapsed into an array using the Reactive approach?

The db.all method does not provide an array as its return variable

What is preventing my content from showing up when clicked like this?

Execute JavaScript function after completion of CSS animation using jQuery

Challenges with JavaScript setInterval

Error encountered: Unexpected token when defining inline style in React

Angular template not refreshing automatically

Use the map function to find the highest number within each array

Exploring how RequireJS and AngularJS services communicate with the controller

Managing JavaScript events in the console

showing the values stored in local storage

Utilizing a function from a separate file in Vue: A step-by-step guide

Generate an HTML dropdown menu based on the item selected from the autocomplete input field

ReactJS not displaying the class effect as intended