Angular js filtering an object by textbox input

Question

I am really new to angular so this may be super simple but I can't seem to get it to work. I have an app that has a search field that needs to actively filter the results as a user types. All of my data is in the searchResults object. Nothing happens when I type in the textbox. What am I missing? Thanks in advance for your help.

<div>
    <input ng-model="query" name="search" id="search" type="text" placeholder="search by product or category">
    <ul id="filteredResults" ng-if="results.length">
        <li ng-repeat="result in results | filteredSearchFilter | limitTo: 10">{{result.name}}</li>
    </ul>
</div>

filteredSearch.filter.js

module.exports = function() {
  return function(data, keys, query) {
      results = [];
      if( !query ){
        return data;
      } else {
         angular.forEach( data, function( obj ){
            var matched = false;
            angular.forEach( keys, function( key ){
               if( obj[key] ){
                  // match values using angular's built-in filter
                  if ($filter('filter')([obj[key]], query).length > 0){
                     // don't add objects to results twice if multiple
                     // keys have values that match query
                     if( !matched ) {
                        results.push(obj);
                     }
                     matched = true;
                  }
               }
            });
         });
      }
      return results;
    };

I realize now that I need to convert the object to an array. I only need the name key. Any ideas? — luigilife
– luigilife, Commented Nov 18, 2016 at 17:22

Sajeetharan · Accepted Answer · 2016-11-18 03:01:26Z

0

You can use the angular filter, and use ng-model variable as filter

<li ng-repeat="result  in results  | filter:query">
     <div>
       {{result .firstname}} {{result .lastname}}
     </div>
</li>

angular.module('myApp', [])
  .controller('myCtrl', function($scope){
    
  $scope.results  = [
    
    {firstname: 'john', lastname: 'smith'},
    {firstname: 'jane', lastname: 'due'},
    {firstname: 'bob', lastname: 'rand'}
    
  ];
  
});

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller='myCtrl'>
  <div>
    <div>
      <input type="text" placeholder="Search" ng-model="query">
    </div>
  </div>

 <ul>
   <li ng-repeat="result  in results  | filter:query">
 <div>
   {{result .firstname}} {{result .lastname}}
 </div>
 </li>
 </ul>

</body>
</html>

answered Nov 18, 2016 at 3:01

Sajeetharan

223k65 gold badges369 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

luigilife Over a year ago

Thanks Sajeetharan. I must have something else that is off because this is not working for me. I was thinking maybe a custom filter might be the way to go. I haven't gotten the custom filter to work either since I believe that I can't access scope within it. Any ideas on that?

luigilife Over a year ago

I figured out part of my problem - I actually am trying to filter an object, and I need result.name in return. I updated my question to reflect this.

Collectives™ on Stack Overflow

Angular js filtering an object by textbox input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related