Tôi đang bị lỗi bởi lỗi Chrome/Webkit 71305, nơi ẩn một số lượng lớn các nút khiến Chrome bị treo. (Cũng xảy ra trong Safari).Làm việc xung quanh để lọc trực tiếp hơn 1500 mục với jQuery trong Chrome
Tôi lọc một mục danh sách đó sẽ được trong một trình đơn thả xuống như sau:
jQuery.expr[':'].Contains = function(a, i, m) {
return $.trim((a.textContent || a.innerText || "")).toUpperCase().indexOf(m[3].toUpperCase()) == 0;
};
var input = $('input');
var container = $('ul');
input.keyup(function(e) {
var filter = $.trim(input.val());
if (filter.length > 0) {
// Show matches.
container.find("li:Contains(" + filter + ")").css("display", "block");
container.find("li:not(:Contains(" + filter + "))").css("display", "none");
}
else {
container.find('li').css("display", "block");
}
});
Snippet của đánh dấu:
<input type="text" />
<ul>
<li>
<div>
<span title="93252"><label><input type="checkbox">3G</label></span>
</div>
</li>
</ul>
Thời gian cần cho Javascript để thực hiện không đáng kể. Đó là khi Chrome cần vẽ lại các phần tử sau khi xóa văn bản trong số input mà nó bị treo. Không xảy ra trong FF6/IE7-9.
tôi đã thực hiện một JSFiddle để minh họa cho vấn đề này: http://jsfiddle.net/uUk7S/17/show/
Có cách tiếp cận khác tôi có thể mất chứ không phải che giấu và hiển thị các yếu tố đó sẽ không gây Chrome để treo? Tôi đã cố gắng nhân bản các ul, xử lý trong clone và thay thế các ul trong DOM hoàn toàn với bản sao, nhưng tôi hy vọng có một cách tốt hơn vì điều này là chậm hơn đáng kể trong IE.
bạn đang thiếu khung đóng cho các phần tử 'span'. Liệu đó có phải là nguyên nhân không? –
@ William, đó chỉ là một sai lầm tôi đã thực hiện khi làm sạch các đánh dấu trong Vim. Tôi sẽ sửa lỗi nhưng vấn đề vẫn tồn tại. (Đặc biệt vì nó hoạt động tốt trong các trình duyệt khác). – Soliah