Фильтрация на стороне клиента

Question

Как гласит заголовок. Я использую jQuery, чтобы творить чудеса. Я использовал пользовательское расширение Contains для селекторов следующим образом:

jQuery.expr[':'].Contains = function(a, i, m) {
   return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

который я нашел на паутинах. Работает нормально. Я использую его в сочетании со следующим:

$("#txtSurname, #txtForename").keyup(function() {
    var forenameVal = $("#txtForename").val();
    var surnameVal = $("#txtSurname").val();
    $("#tblEmployees tr").show();
    if (forenameVal.length > 0) { $("#tblEmployees tr td:nth-child(1):not(:Contains('" + forenameVal + "'))").parent().hide(); }
    if (surnameVal.length > 0) { $("#tblEmployees tr td:nth-child(2):not(:Contains('" + surnameVal + "'))").parent().hide(); }
});

Однако, это крайне неэффективно, и с таблицей в 500 строк это очень сложно. Мои навыки jQuery uber-ninja не так хороши, как у следующего разработчика, когда дело доходит до написания эффективных селекторов, поэтому мне было интересно, есть ли лучший способ сделать это?

Answer 1

Одним из предложений является повторное использование общего объекта jQuery, который должен сократить накладные расходы:

$("#txtSurname, #txtForename").keyup(function() {
    var forenameVal = $("#txtForename").val();
    var surnameVal = $("#txtSurname").val();
    var  t = $("#tblEmployees tr");
    t.show();
    if (forenameVal.length > 0) { t.find("td:nth-child(1):not(:Contains('" + forenameVal + "'))").parent().hide(); }
    if (surnameVal.length > 0) { t.find("td:nth-child(2):not(:Contains('" + surnameVal + "'))").parent().hide(); }
});

Answer 2

Это довольно сложный селектор для соответствия jQuery. Вы просите сделать немало ненужной работы.

В то время как стандартные селекторы CSS могут позволить вам использовать быструю реализацию соответствия браузеров CSS в новых браузерах с querySelectorAll, пользовательские селекторы jQuery всегда будут работать медленно. Я бы предположил, что если у вас проблемы со скоростью, вам, вероятно, лучше написать соответствующий код в виде явного JavaScript, а не вводить его в селекторы.

Использование явного совпадающего кода также означает, что вы можете потерять уродливость конкатенации строк в селекторе Contains('" + forenameVal + "'), что пойдет не так, если во входном имени присутствуют специальные символы, такие как '. ' довольно часто встречается в реальных именах.

например. (Непроверенные):

var forenameVal= $('#txtForename').val().toUpperCase();
var surnameVal= $('#txtSurname').val().toUpperCase();
var table= document.getElementById('table');
for (var i= table.rows.length; i-->0;) {
    var row= table.rows[i];
    row.className= (
        row.cells[0].firstChild.data.toUpperCase().indexOf(forenameVal)!==-1 &&
        row.cells[1].firstChild.data.toUpperCase().indexOf(surnameVal)!==-1
    )? '' : 'hidden';
}

Обратите внимание, что для получения data каждая ячейка имени имеет один дочерний узел Text. Если это не так (ячейка имени может содержать другое содержимое или вообще не содержать его, даже пробелы), вам придется использовать вместо него $(row.cells[0]).text(), но это также будет медленнее.

Он также использует className для скрытия ключа (вы бы поместили .hidden { display: none; } в таблицу стилей), чтобы избежать некоторых трудностей с сокрытием строк таблицы. Вместо этого вы могли бы превратить его в if (...) $(row).show(); else $(row).hide();, но опять-таки это заставляет jQuery выполнять немного больше работы.

Answer 3

Рассматривали ли вы усовершенствовать свой пользовательский селектор (см. Ниже)

Как определить тип элемента ввода HTML для события, используя jQuery?

Какие полезные пользовательские селекторы jQuery вы написали?

var $item = jQuery(a);
return ($item.attr("type") == "input") &&
        $item.text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;