AngularJS filter search

Question

I have tried the filter logic from angular to one of the unordered list. But, the search filter is working after typed 3 characters of the name, sometimes giving wrong search results.

 <input type='text' ng-model='searchString' placeholder="Search a name..." />


<ul class="nav">
     <li class="active" ng-repeat="item in artists.People | filter :searchString">
           <a href ng-click='setSelectedArtist(item)'>{{item.name}}</a>
     </li>
 </ul>

JSON:

{

    "People":[
       {
          "name":"Andrew Amernante",
          "rating":3,
          "img":"http://www.fillmurray.com/200/200",
          "Description":"Glutenfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
          "Likes":[
             "Dogs",
             "Long walks on the beach",
             "Chopin",
             "Tacos"
          ],
          "Dislikes":[
             "Birds",
             "Red things",
             "Danish food",
             "Dead Batteries"
          ]
       },
       {
          "name":"Frank Wang",
          "rating":5,
          "img":"http://www.fillmurray.com/200/201",
          "Description":"Before errors, mails were only pressures. This is not to discredit the idea that a magic is the prose of anelizabeth. This could be, or perhaps some posit the outmost coil to be less than dedal. Some assert that those treatments are nothing more than carp.",
          "Likes":[
             "Frank",
             "Manchester United",
             "Football",
             "Programming"
          ],
          "Dislikes":[
             "Dogs",
             "Long walks on the beach",
             "Chopin",
             "Tacos"
          ]
       },
       {
          "name":"Sissi Chen",
          "rating":5,
          "img":"http://www.fillmurray.com/200/202",
          "Description":"Aaah! Natural light! Get it off me! Get it off me! Oh, loneliness and cheeseburgers are a dangerous mix. D'oh. Here's to alcohol, the cause of all life's problems.",
          "Likes":[
             "Cats",
             "the beach",
             "Chopin",
             "Blue things"
          ],
          "Dislikes":[
             "Birds"
          ]
       },
       {
          "name":"Diego Garcia",
          "rating":2,
          "img":"http://www.fillmurray.com/200/204",
          "Description":"Facts are meaningless. You could use facts to prove anything that's even remotely true! I prefer a vehicle that doesn't hurt Mother Earth. It's a gocart, powered by my ownsense of selfsatisfaction. You don't win friends with salad.",
          "Likes":[
             "Talking Spanish",
             "Spanish food",
             "Spanish things",
             "Football"
          ],
          "Dislikes":[
             "Not talking spanish",
             "Chopin"
          ]
       },
       {
          "name":"Fuad Rashid",
          "rating":4,
          "img":"http://www.fillmurray.com/200/206",
          "Description":"Glutenfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
          "Likes":[
             "Dogs",
             "Long walks on the beach",
             "Chopin",
             "Tacos"
          ],
          "Dislikes":[
             "Birds",
             "Red things",
             "Danish food",
             "Dead Batteries"
          ]
       }
    ]
 }

Here is the plnkr code.

Ex: Start typing 'si', you will end up with two results where first one(frank wang) is not correct.

And, this is the reference plnkr where I'm referring for.

Alexander Staroselsky · Accepted Answer · 2018-07-10 19:33:44Z

4

You would need to specify which object property, in this case name for the filter to filter against:

<input type='text' ng-model='searchString' placeholder="Search a name..." />

<ul class="nav">
  <li class="active" ng-repeat="item in artists.People | filter: { name: searchString }">
    <a href ng-click='setSelectedArtist(item)'>{{item.name}}</a>
  </li>
</ul>

You would need to set the initial value of searchString to an empty string as well to match against all people when no text has been entered.

$scope.searchString = '';

Here is a Plunker demonstrating the functionality.

Hopefully that helps!

edited Jul 10, 2018 at 19:33

answered Jul 10, 2018 at 19:13

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

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

2 Comments

UI_Dev Over a year ago

The array has not been loaded from the above code snippet

Alexander Staroselsky Over a year ago

You didn't specify an initial value for searchString. If you set $scope.searchString = ''; that should load it. Let me update the answer and Plunker. This does solve the issue of incorrect names displaying when entering characters.

Hardik Shah · Accepted Answer · 2018-07-10 19:23:35Z

1

You can create your own customized filter to specify on which property you need to search:

$scope.searchTextByName = function(artist){
    if($scope.searchText !== undefined){
        if(artist.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) > -1 ){
           return artist;
        }
    }
}

Otherwise, it will match on all JSON value of single people object with your searchText key.

answered Jul 10, 2018 at 19:23

Hardik Shah

4,2082 gold badges22 silver badges45 bronze badges

Collectives™ on Stack Overflow

AngularJS filter search

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related