Question

我试图在angularjs中构建自动搜索。我能够在Json obj中获取值并基于搜索循环遍历列表。但是当我给出“退格”或删除文本并尝试再次输入时，旧的搜索结果将附加到自动建议。我不知道如何从数组中删除它。请在下面点击plunker以获取代码。

下面的代码有问题的部分。这里我得到的搜索结果与我想要的不同

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

Answer 1

应用＆＃39; 过滤器＆＃39;在＆＃39; ng-repeat ＆＃39;如下图所示

<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>

它将给出以下结果

对于有效输入，将显示建议

对于无效输入，不会显示建议

Answer 2

只需在开头将输出声明为[]，这样每次键入时都会以空数组开头。请检查以下代码以删除重复的建议

$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);               
                  } 
}

工作人员：http://plnkr.co/edit/oVRTRfC55lH5IuEIYukv?p=preview

如何在angularjs中实现自动搜索

2 个答案: