Поработайте с живой фильтрацией 1500+ предметов с jQuery в Chrome

Меня укусила ошибка Chrome/Webkit 71305, при которой удаление большого количества узлов приводит к зависанию Chrome. (Также встречается в Safari).

Я фильтрую пункт списка, который будет в выпадающем меню со следующим:

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

Фрагмент разметки:


Время, необходимое для выполнения Javascript, ничтожно мало. Именно тогда, когда Chrome нужно перерисовать элементы после удаления текста в input, он зависает. Этого не происходит в FF6/IE7-9.

Я сделал JSFiddle для иллюстрации этой проблемы: http://jsfiddle.net/uUk7S/17/show/

Есть ли другой подход, который я могу использовать вместо того, чтобы скрывать и показывать элементы, которые не приводят к зависанию хрома? Я пытался клонировать ul, обрабатывая в клоне и полностью заменяя ul в DOM на клон, но надеюсь, что есть лучший способ, так как в IE это происходит значительно медленнее.

8
задан Soliah 30 August 2011 в 06:43
поделиться