Lọc danh sách lớn bằng javascript

Question

Tôi có danh sách yếu tố rất lớn (14000+), tôi muốn có trường tìm kiếm khi bạn nhập văn bản vào đó, nó lọc kết quả và ẩn các phần tử không liên quan.

Hiện nay tôi đang sử dụng này:

$.expr[':'].containsIgnoreCase = function (n, i, m) { 
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
}; 
$("#search").on("keyup", function() { 
    var filter = $("#search").val(); 
    $(".list-group-item").not(":containsIgnoreCase('" + filter + "')").addClass("hidden"); 
    $(".list-group-item:containsIgnoreCase('" + filter + "')").removeClass("hidden"); 
}); 

Những tác phẩm tuyệt vời ... trên danh sách nhỏ hơn. Danh sách này chỉ đơn giản là quá lớn để có thể quản lý được với mã đó.

Tôi không biết liệu có bất kỳ mã nào khác có thể xử lý nhiều phần tử phía khách hàng này hay không. Nếu không, sẽ tốt hơn nếu để trống danh sách và thực hiện yêu cầu ajax để điền vào danh sách khi các kết quả phù hợp được thực hiện?

Answer 1

Tôi nghĩ có nhiều cách để tối ưu hóa tìm kiếm nhưng bạn quyết định sử dụng mã như được hiển thị trong câu hỏi hoặc sử dụng các cuộc gọi ajax tôi sẽ đề xuất như một cải tiến để giảm số lượng cuộc gọi đến chức năng tìm kiếm bằng cách sử dụng ga/debounce. Điều này sẽ ngăn tìm kiếm được gọi sau mỗi lần đột quỵ chính nhưng thay vào đó sẽ trì hoãn việc thực hiện tìm kiếm với một số mili giây sau lần đột quỵ chính cuối cùng. Ví dụ đoạn code trên có thể được thay đổi như sau:

function searchFunction() { 
    var filter = $("#search").val(); 
    $(".list-group-item").not(":containsIgnoreCase('" + filter + "')").addClass("hidden"); 
    $(".list-group-item:containsIgnoreCase('" + filter + "')").removeClass("hidden"); 
} 
$("#search").on("keyup", $.debounce(searchFunction, 300)); 

Có rất nhiều thực thi mã nguồn mở chức năng debounce trên mạng, nhưng trong ví dụ trên tôi đã sử dụng jquery-debounced. Để xem cách hoạt động này, vui lòng kiểm tra số jsfiddle này. Triển khai khác có sẵn trong underscore.js library. Ngoài ra tôi tìm thấy một đẹp article về chủ đề này.