Cách chính xác để lập trình hộp văn bản tìm kiếm trong angularJs

Question

Tính năng rất phổ biến trong một số phần của ứng dụng của tôi là hộp tìm kiếm chấp nhận một chuỗi và sau đó lọc một bảng dựa trên chuỗi.

Điều tôi đang hướng tới là khả năng cho phép người dùng nhập nội dung nào đó và tự động sau một vài phút trì hoãn kết quả tự cập nhật. tức là không cần nhấn nút enter.

Phân loại ofcourse của dữ liệu sẽ được thực hiện bằng cách sử dụng các bộ lọc AngularJs. Tuy nhiên trước khi chúng tôi cập nhật bộ lọc, tôi tin rằng trước hết chúng tôi phải hiểu rằng người dùng đã hoàn tất việc nhập dữ liệu nhập và hiện đang chờ kết quả.

Vì vậy, tôi đã lập bản đồ chỉ thị sẽ được đính kèm vào hộp nhập tìm kiếm.

<input type="text" update-filter placeholder="Enter search term"> 


//and the directive goes like this 
app.directive('updateFilter', [ '$timeout', function($timeout){ 
    var delay; 
    return { 
    link: function(scope, element){ 
     element.on('keypress', function(){ 
      if(!delay) { 
       delay = $timeout(function() { 
        //perform the activity of updating the filter here 
       delay = undefined; 
       },50); 
      } 
     } 
    } 
    } 
}); 

Câu hỏi của tôi là, đây có phải là cách tiếp cận đúng để giải quyết vấn đề này hoặc có giải pháp tốt hơn không?

Answer 1

Bạn đang quá phức tạp điều này. Nó có thể được thực hiện dễ dàng hơn nhiều trong góc.

<input type="text" ng-model="query" ng-model-options="{ debounce: 200 }" 
    ng-change="doSearch()"> 

Sử dụng $scope.query để truy cập truy vấn trong bộ điều khiển của bạn. Xác định $scope.doSearch() để thực hiện tìm kiếm. Tùy chọn gỡ lỗi được sử dụng để chờ 200ms sau khi người dùng nhập xong.

Answer 2

Khi tôi viết bộ lọc, tôi sử dụng mô hình ng trên đầu vào bộ lọc để nhận quyền truy cập vào giá trị bộ lọc, sau đó sử dụng giá trị đó trực tiếp trong giá trị bộ lọc ng-repeat. Ví dụ, đây là đầu vào để có được giá trị lọc:

<input type="text" ng-model="user_filter" /> 

và đây là một dòng của bảng tuần hoàn, lọc bởi giá trị theo mô hình trên:

<tr ng-repeat="user in users | filter: user_filter"> 

Ngay sau khi bạn gõ, thanh ghi góc mới giá trị và bộ lọc được áp dụng. Không cần phải chờ đợi hoặc thực hiện bất kỳ hành động nào vì góc cạnh áp dụng các giá trị được ánh xạ cho bạn.

Khám phá Angular docs on filter. Nó có một ví dụ làm việc ở dưới cùng của trang cho thấy điều này trong hành động.