enter image description here

Я пытаюсь добавить фильтр поиска, чтобы пользователь мог найти результаты из этого списка контрактов, пока они набирают текст. Например: если пользователь вводит «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
AspiringCanadian 14 Дек 2015 в 23:24

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');
   }
});
1
Adam Benzan 14 Дек 2015 в 20:52

Если вы хотите простой поиск, вы можете проверить, содержится ли введенный текст в строке следующим образом: Как проверить, содержит ли строка подстроку в JavaScript?

Вы можете проверить каждое слово, введенное в поиске, разделив строку разделителем пробелов и используя цикл, но это потребует больше усилий, если в нем также есть слова или много, если введены записи.

1
Community 23 Май 2017 в 12:07

Краткий и регистрозависимый вариант:

$('#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();
   }
});
1
RomanPerekhrest 14 Дек 2015 в 20:56