CODEWITHSUNDEEP
javascriptangularjs
shabarinath
shabarinath

Reputation: 603

how to implement auto search in angularjs

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

Upvotes: 0

Views: 167

Answers (2)

Advait Baxi
Advait Baxi

Reputation: 1638

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

  1. For valid input it will show suggestions

enter image description here

enter image description here

  1. For invalid input it will not show suggestions

enter image description here

enter image description here

Upvotes: 1

Niladri
Niladri

Reputation: 5962

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

Upvotes: 1

Related Questions