在AngularJS中進行實時搜索：更新搜索結果

我想要進行實時搜索：查詢結果從web api並更新爲用戶類型。在AngularJS中進行實時搜索：更新搜索結果

問題是，即使列表中的結果保持不變，列表中的閃爍和「無結果」文本也會出現幾分之一秒。我想我需要刪除並添加特殊代碼的項目，以避免這種情況，計算陣列之間的差異等。

是否有一個更簡單的方法來避免這種閃爍至少，並可能有動畫變化的可能性？

現在看起來是這樣的：

How live search looks like

HTML部分是：

<div class="list-group"> 
     <a ng-repeat="test in tests track by test.id | orderBy: '-id'" ng-href="#/test/{{test.id}}" class="list-group-item"> 
      <h4 class="list-group-item-heading">{{test.name}}</h4> 
      {{test.description}} 
     </a> 
    </div> 
    <div ng-show="!tests.length" class="panel panel-danger"> 
     <div class="panel-body"> 
      No tests found. 
     </div> 
     <div class="panel-footer">Try a different search or clear the text to view new tests.</div> 
    </div>

而且控制器：

testerControllers.controller('TestSearchListCtrl', ['$scope', 'TestSearch', 
function($scope, TestSearch) { 
    $scope.tests = TestSearch.query(); 
    $scope.$watch('search', function() { 
     $scope.tests = TestSearch.query({'q':$scope.search}); 
    }); 
}]);

來源

2015-04-26 Andrey Moiseev

爲什麼你不使用過濾器而不是使用'$ watch'？你現在正在做這件事的方式，你正在做一個新的搜索每一次擊鍵，這是一個新的服務器調用;一個過濾器只會過濾數據客戶端。 – Claies

我需要搜索服務器上的所有結果。過濾器用於在靜態列表中快速搜索。我剛剛發現如何在每次擊鍵時搜索：'ng-model-options =「{debounce：1000}」'用'ng-model'對元素進行搜索。但是當它重新加載時，它仍然閃爍。 –

您應該使用ng-animate模塊來獲取您需要平滑動畫的課程。對於每個移動，添加或刪除的ng-repeat項目，angular都會添加特定的類。然後，您可以通過CSS或JS對這些類進行設置，使其不閃爍。

來源

2015-04-26 21:24:53

另一種做你需要的方法是使用angular-ui bootstrap Typeahead component（在帖子的底部檢查）。它具有以毫秒爲單位的type-ahead-wait屬性以及用於定製它的模板url。

來源

2015-04-26 21:26:49 sarin

Typeahead使用帶搜索建議的彈出式窗口，但我希望結果是內聯的。 –

-1

<div ng-app> 
    <div ng-controller="MyController"> 
     <input type="search" ng-model="search" placeholder="Search..."> 
     <button ng-click="fun()">search</button> 
     <ul> 
      <li ng-repeat="name in names">{{ name }}</li> 
     </ul> 
     <p>Tips: Try searching for <code>ann</code> or <code>lol</code> 

     </p> 
    </div> 
</div> 



function MyController($scope, $filter) { 
    $scope.names = [ 
     'Lolita Dipietro', 
     'Annice Guernsey', 
     'Gerri Rall', 
     'Ginette Pinales', 
     'Lon Rondon', 
     'Jennine Marcos', 
     'Roxann Hooser', 
     'Brendon Loth', 
     'Ilda Bogdan', 
     'Jani Fan', 
     'Grace Soller', 
     'Everette Costantino', 
     'Andy Hume', 
     'Omar Davie', 
     'Jerrica Hillery', 
     'Charline Cogar', 
     'Melda Diorio', 
     'Rita Abbott', 
     'Setsuko Minger', 
     'Aretha Paige']; 
    $scope.fun = function() { 
     console.log($scope.search); 
     $scope.names = $filter('filter')($scope.names, $scope.search); 
    }; 
}

來源

2015-04-29 08:13:28 ramsingh

問題是關於使用* web api *進行搜索，而不是本地過濾。本地過濾很容易通過添加'|來完成過濾器：搜索'到'ng-repeat'指令，在控制器中沒有額外的代碼。 –

在AngularJS中進行實時搜索：更新搜索結果

回答

相關問題