#wordpress #class #search #hide
#wordpress #класс #Поиск #скрыть
Вопрос:
У меня есть сайт WordPress с длинной таблицей людей и данных, и мне нужно добавить фильтр поиска, который показывает только людей, которые соответствуют введенным словам. Вот код, который я использую:
$(document).ready(function() {
$('input[name=searchFilterInput]').keyup(function() {
var searchFilterVal = $('input[name=searchFilterInput]').val();
searchFilterVal = searchFilterVal.replace(/ /g, '-');
searchFilterVal = searchFilterVal.toLowerCase();
if(searchFilterVal == '') {
$('tr.hide').fadeIn('slow').removeClass('hide');
} else {
$('tr.fellows').each(function() {
if(!$(this).hasClass(searchFilterVal)) {
$(this).fadeOut('normal').addClass('hide');
} else {
$(this).fadeIn('slow').removeClass('hide');
}
});
}
});
});
Это отлично работает, пока входные данные точно соответствуют классу. Мне нужно if(!$(this).hasClass(searchFilterVal)) {
в основном сказать «If (this) .hasClass (если входные данные соответствуют какой-либо части класса)»
Имеет ли это смысл? Вот страница:http://cambridgefellows.com/directory-of-fellows/?searchFilterInput=Media
Это второе поле поиска — то, что находится справа от выпадающего меню.
Извините, если этот вопрос задан нечетко — пожалуйста, дайте мне знать, если я могу сделать это более понятным. Спасибо!
Комментарии:
1. Неясно, чего вы хотите достичь сейчас.
2. Прямо сейчас, если я буду искать слово «Media», фильтр скроет всех, у кого нет именно «Media» в качестве одного из своих блоков данных. Но я хотел бы иметь возможность искать «Med» и показывать всех, у кого есть «Media» или также «Medical» и т.д. Мне нужно, чтобы IF, который ищет hasClass, принимал подмножество класса.
3. Также — прямо сейчас каждый <TR> таблицы получает все данные во всех <TD> этой строке, добавленные в качестве классов к <TR> — вот как работает фильтр.
4. По какому параметру он фильтрует результат в настоящее время. ?
5. Прямо сейчас, когда вы вводите строку поиска, он проверяет, есть ли у каких-либо <TR> s эта строка поиска в качестве класса. Каждый <TR> содержит содержимое каждого отдельного <TD>, добавленного в качестве класса. Итак, если вводимая вами строка поиска в точности равна некоторому содержимому <TD>, то фильтр покажет эти <TR> и скроет все остальные. Но мне нужно, чтобы фильтр работал так, чтобы совпадение не обязательно было точным. Так что частичное совпадение также будет работать. Я думал, что, возможно, indexOf () будет работать, но я пока не смог в этом разобраться.
Ответ №1:
Попробуйте это.. Я проверил это, это работает
$(document).ready(function() {
$('input[name=searchFilterInput]').keyup(function() {
var searchFilterVal = $('input[name=searchFilterInput]').val();
searchFilterVal = searchFilterVal.replace(/ /g, '-');
searchFilterVal = searchFilterVal.toLowerCase();
if(searchFilterVal == '') {
$('tr.hide').fadeIn('slow').removeClass('hide');
} else {
$('tr.fellows').each(function() {
var pattern = $(this).attr('class'); // the pattern to be matched
var match = pattern.match(searchFilterVal);//If pattern matches it returns the match
if(!match) {
$(this).fadeOut('normal').addClass('hide');
} else {
$(this).fadeIn('slow').removeClass('hide');
}
});
}
});
});
Комментарии:
1. Это определенно работает! Я отказался от необходимости в классах (которая возникла из метода, который я использовал для фильтра выпадающего меню) и заставил его работать с помощью .text () — но это решение — именно то, что я искал. Я не был знаком с .match () — спасибо! Теперь мне нужно выяснить, как заставить два разных метода фильтрации, которые я использую, работать вместе, но это будет другой вопрос. Спасибо!