У меня есть панель поиска на моей странице, которая использует JQuery для фильтрации моего gridview. Я не могу понять, как его фильтровать по нескольким значениям; используя разделитель для определения разных значений.
Поэтому, если я помещаю в строку поиска: "Собака", "Синяя", она распознает кому как разделитель и сначала отфильтрует таблицу и спрячет любые строки, которые не содержат "Собака", а затем также спрячет любые строки, которые не содержат синий.
Здесь мой код для того, что у меня есть, теперь только в состоянии ввести одно слово.
//Filter Grid logic
$("tbody").attr('class', 'searchable');
$('input.filter').on('keyup', function () {
var rex = new RegExp($(this).val(), 'i');
$('.searchable tr').hide();
$('.searchable tr').filter(function () {
return rex.test($(this).text());
}).show();
//Always show the Header row
$('tr.GridViewHeader').show();
});
});
Спасибо за любую помощь!
Отредактированный выше ответ немного, чтобы заставить его "И" здесь решить:
$(document).ready(function () {
//Filter Grid logic
$("tbody").attr('class', 'searchable');
$('input.filter').on('keyup', function () {
// Construct array of search text
var searchtext = $(this).val().split(' ');
// Construct new RegExp object
var rex = new RegExp('(?=.*' + searchtext.join(')(?=.*') + ').*', 'ig');
$('.searchable tr').hide();
$('.searchable tr').filter(function () {
return $(this).text().replace(/(\r\n|\n|\r)/gm, " ").match(rex)
}).show();
//Always show the Header row
$('tr.GridViewHeader').show();
});
});
Вот стратегия, которая может казаться запутанной, но работает для меня в последний раз, когда я проверял: http://jsfiddle.net/teddyrised/mWK2F/
<input>
, удалив все конечные/ведущие пробелы ^\s*|\s*$
, а затем разделив их ,
делая уступки, которые могут быть пробелы, возможно, перед запятой или после запятой (поэтому используя \s*,\s*
|
, который является оператором OR в регулярном выражении.Вот ваш модифицированный скрипт
//Filter Grid logic
$("tbody").attr('class', 'searchable');
$('input.filter').on('keyup', function () {
// Construct array of search text
var searchtext = $(this).val().replace(/^\s*|\s*$/g,'').split(/\s*,\s*/),
// Construct new RegExp object
rex = new RegExp(searchtext.join('|'),'i');
$('.searchable tr').hide();
$('.searchable tr').filter(function () {
return rex.test($(this).text());
}).show();
//Always show the Header row
$('tr.GridViewHeader').show();
});
Однако, если вы хотите совместить полные слова, вам нужно будет использовать границы слов, \b
. Не забудьте избежать обратной косой черты, поэтому вместо этого мы используем \\b
. Код был вдохновлен, увидев аналогичный ответ: javascript match to array
rex = new RegExp('\\b'+searchtext.join('\\b|\\b')+'\\b','i');
});
в вашем коде - возможно, захотите взглянуть на это.