how to implement auto search in angularjs

Question

Iam trying to build a auto search In angularjs. Iam able to get values in Json obj and loop through the list based on search., but when I give 'backspace' or delete the text and try to enter again., Old search results is appending to auto suggests. I dont get how to remove it from array. Please pind plunker below for code.

code problematic section below.Here Iam getting different search results than which I supposed to get

for (var i=0 ; i < $scope.suggestionResults.length ; i++){  

            //if($scope.suggestionResults[i].title.indexOf(suggestText) > -1) 
            //if($scope.suggestionResults[i].title.match(suggestText))  
                var str = $scope.suggestionResults[i].title;
            if(str.indexOf(suggestText) > 0)    
                //$scope.suggestionResults[i].title.match(suggestText)          
                {  
                    output.push($scope.suggestionResults[i].title);  
                } else{
                    console.log(suggestText + 'Not matching');
                    //array.splice(index, 1);
                    if(output.length > 0){
                        output[i].splice($scope.suggestionResults[i].title, 1);
                    }

                }
            $scope.filterSearch = output;   
            console.log($scope.filterSearch);   


        // if ($scope.suggestionResults[i].title.includes(suggestText)) {
           // output.push(suggestText);
        // }
        // $scope.filterSearch = output;

    }

Plnker code here

I have used filters insted and its working. Is there any possibility that filters start working after entering 3 characters <li class="list-group-item" ng-repeat="values in suggestionResults | filter:searchText" ng-click="showProduct(searchText)">{{values.title}}</li> — shabarinath
– shabarinath, Commented May 17, 2018 at 9:36

Niladri · Accepted Answer · 2018-05-17 09:42:39Z

1

Just declare output as [] at the beginning so that you start with an empty array each time you type .. check the below code to remove the duplicate suggestions

$scope.autoComplete = function(suggestText){
        var output = [];
        if(suggestText.length === 0){
          output = [];          
        }
        if(suggestText.length > 2){
            $scope.hidethis = false;            
        }
                for (var i=0 ; i < $scope.suggestionResults.length ; i++){              
                    //if($scope.suggestionResults[i].title.indexOf(suggestText) > -1) 
                    //if($scope.suggestionResults[i].title.match(suggestText))  
                        var str = $scope.suggestionResults[i].title;
                        console.log(suggestText.toLowerCase());
                        console.log(str);
                    if(str.toLowerCase().indexOf(suggestText.toLowerCase()) > -1)   
                        //$scope.suggestionResults[i].title.match(suggestText)          
                        {  
                            output.push($scope.suggestionResults[i].title);  
                        } else{
                            console.log(suggestText + 'Not matching');
                            //array.splice(index, 1);
                            //if(output.length > 0){
                            //  output[i].splice($scope.suggestionResults[i].title, 1);
                            //}

                        }
                    $scope.filterSearch = output;   
                    console.log($scope.filterSearch);               
                  } 
}

Working plunker : http://plnkr.co/edit/oVRTRfC55lH5IuEIYukv?p=preview

answered May 17, 2018 at 9:42

Niladri

5,9922 gold badges27 silver badges45 bronze badges

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

1 Comment

shabarinath Over a year ago

Thanks a lot. Working fine. Iam trying to make it search work after entering 2 characters. For that I tried using if(searchText.length > 2) and wrapped for loop inside it. But auto suggest stopped working. may i know where have i gone wrong

Advait Baxi · Accepted Answer · 2018-05-18 15:10:14Z

1

Apply 'filter' in 'ng-repeat' as shown below

<ul class="list-group">
    <li class="list-group-item" ng-repeat="suggestionResult in suggestionResults | filter:{title:searchText}" ng-click="showProduct(searchText)">{{suggestionResult.title}}</li>
</ul>

It will give following results

For valid input it will show suggestions

For invalid input it will not show suggestions

edited May 18, 2018 at 15:10

answered May 17, 2018 at 9:42

Advait Baxi

1,6661 gold badge17 silver badges15 bronze badges

3 Comments

shabarinath Over a year ago

., I tried using the filter option as well u suggested. It works well when it can find product matching the tex., now if I search something which doesnt exist in product json list., it start showing all results and sometimes., unrelated keywords in results. Plunker here. pls check plnkr.co/edit/GjYxMVCfTBJZY3LGpIeN?p=preview ., over there., check json and just type., product in search box., it shows all results which is not matching any text in json.

Advait Baxi Over a year ago

@shabarinath I have tested for the link you have given and it is working fine here. I have updated my answer and attached some images. Please see those images. If you are still facing problem then let me know I will again look into that.

shabarinath Over a year ago

wow. That worked like charm. I wonder what makes the difference in ng-repeat = values in suggestionResults | filter:searchText"` and ng-repeat="values in suggestionResults | filter:name: {{searchText}}"" .. since it reads ng-model value and reads through out the li elements., why the 2nd one filters more accurate

Collectives™ on Stack Overflow

how to implement auto search in angularjs

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related