Я пытаюсь добавить фильтр поиска, чтобы пользователь мог найти результаты из этого списка контрактов, пока они набирают текст. Например: если пользователь вводит «IP», то должны отображаться первые 4 результата. Следующее является функцией:
$('#doc_search').on('keyup', function(){
var inputtext = $(this).val().toLowerCase();
$('.subdoclist li a').each(function() {
if(inputtext ==''){
$('.subdoclist li').each(function(){
$(this).addClass('show');
});
console.log(inputtext);
} else if ($(this).text().toLowerCase() === inputtext) {
$('.subdoclist li').removeClass('show');
$(this).parent().addClass('show');
console.log(inputtext);
}
});
})
- «#doc_search» - это поле поиска сверху
- «.subdoclist li» - это элементы списка, которые содержат теги привязки с текстом
На данный момент я должен набрать точный текст, и только тогда поиск работает.
Ссылка Fiddle: Нажмите здесь
3 ответа
Здесь есть несколько вещей, исправленных, во-первых, я использую indexOf> -1, чтобы увидеть, содержится ли входная строка в каждом потенциальном совпадении, и вместо удаления показа для всех из них для каждого совпадения, я делаю это перед этим. выполняет поиск.
$('#doc_search').on('keyup', function() {
var inputtext = $(this).val().toLowerCase();
if (inputtext != '') {
$('.subdoclist li').removeClass('show');
$('.subdoclist li a').each(function() {
if ($(this).text().toLowerCase().indexOf(inputtext) > -1) {
$(this).parent().addClass('show');
}
});
} else {
$('.subdoclist li').addClass('show');
}
});
Если вы хотите простой поиск, вы можете проверить, содержится ли введенный текст в строке следующим образом: Как проверить, содержит ли строка подстроку в JavaScript?
Вы можете проверить каждое слово, введенное в поиске, разделив строку разделителем пробелов и используя цикл, но это потребует больше усилий, если в нем также есть слова или много, если введены записи.
Краткий и регистрозависимый вариант:
$('#doc_search').on('keyup', function() {
var inputtext = $(this).val();
if (inputtext !== '') {
$('.subdoclist li').each(function() {
$(this).toggle($("a:contains('"+ inputtext +"')",$(this)).length > 0);
});
} else {
$('.subdoclist li').show();
}
});
En Español