Сравнение строки с каждым элементом li

Question

Я хотел бы сравнить ввод с элементами li, но по какой-то причине он проверяет только последний элемент li. Вы можете увидеть это при запуске скрипта ниже все с «тестом» работает нормально, но не для «примера» или «пример 2»

$(document).ready(function() { 
 
    var $input = $('#autocomplete'); 
 
    $(document).on('keyup', $input, function() { 
 
     var $val = $input.val().trim(), 
 
      $select = $('.autocomplete-content'); 
 

 
     // Check if the input isn't empty 
 
     if ($val != '') { 
 
      $select.children('li').each(function() { 
 
       var $li = $(this), 
 
        $html = $li.html(), 
 
        $text = $li.text().trim(); 
 

 
       // Set input value 
 
       $li.click(function() { 
 
        $input.val($text); 
 
       }); 
 

 
       // Check if the value has at least 1 match else hide 
 
       if ($text.indexOf($val) !== -1) { 
 
        // Remove class hide when input changes and finds a match 
 
        if ($li.hasClass('hide')) { 
 
         $li.removeClass('hide'); 
 
        } 
 

 
        // Unhide "ul.autocomplete-content" 
 
        if ($select.hasClass('hide')) { 
 
         $select.removeClass('hide'); // Show options 
 
        } 
 
       } else { 
 
        $li.addClass('hide'); 
 
        $select.addClass('hide'); // Hide options 
 
       } 
 
      }); 
 
     } else { 
 
      $select.addClass('hide'); 
 
     } 
 
    }); 
 
});

.hide { 
 
    display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="autocomplete" class="autocomplete"> 
 

 
<ul class="autocomplete-content hide"> 
 
    <li><img src="test.jpg"> example</li> 
 
    <li><img src="test.jpg"> example 2</li> 
 
    <li><img src="test.jpg"> test</li> 
 
</ul>

Так что мой вопрос, как я могу сравнить вход против каждого элемента li. Заранее спасибо.

Update

Что-то я забыл упомянуть, что в li элемент может быть img вот причина, почему я использовал $li.text()

Answer 1

Вместо прохода через все li-х, когда-либо въезжают на входе, вы можете попробовать использовать селектор псевдо :contains. Это находит все элементы с предоставленным нами текстом, и если вы намерены найти элементы, которые начинаются с строки поиска, вам может понадобиться немного импровизировать. This thread может быть полезно.

$(document).ready(function() { 
 
    var $input = $('#autocomplete'); 
 
    $(document).on('keyup', $input, function() { 
 
    var $val = $input.val().trim(), 
 
     $select = $('.autocomplete-content'); 
 
    // Check if the input isn't empty 
 
    if ($val != '') { 
 
     $select.children('li').addClass('hide') 
 
     $select.children('li').filter(function() { 
 
     \t console.log($(this).text().indexOf($val)) 
 
     \t return $(this).text().indexOf($val) !== -1; 
 
     }).removeClass('hide'); 
 
    } else { 
 
     $select.children().addClass('hide'); 
 
    } 
 
    }); 
 
});

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="autocomplete" class="autocomplete"> 
 

 
<ul class="autocomplete-content"> 
 
    <li class="hide"><img src="test.jpg"> example</li> 
 
    <li class="hide"><img src="test.jpg"> example 2</li> 
 
    <li class="hide"><img src="test.jpg"> test</li> 
 
</ul>

Answer 2

Нужно удалить $select.addClass('hide');. Он вызывается, когда вход не соответствует test, даже если он может совпадать с example.

$(document).ready(function() { 
 
    var $input = $('#autocomplete'); 
 
    $(document).on('keyup', $input, function() { 
 
     var $val = $input.val().trim(), 
 
      $select = $('.autocomplete-content'); 
 

 
     // Check if the input isn't empty 
 
     if ($val != '') { 
 
      $select.children('li').each(function() { 
 
       var $li = $(this), 
 
        $html = $li.html(), 
 
        $text = $li.text().trim(); 
 

 
       // Set input value 
 
       $li.click(function() { 
 
        $input.val($text); 
 
       }); 
 

 
       // Check if the value has at least 1 match else hide 
 
       if ($text.indexOf($val) !== -1) { 
 
        // Remove class hide when input changes and finds a match 
 
        if ($li.hasClass('hide')) { 
 
         $li.removeClass('hide'); 
 
        } 
 

 
        // Unhide "ul.autocomplete-content" 
 
        if ($select.hasClass('hide')) { 
 
         $select.removeClass('hide'); // Show options 
 
        } 
 
       } else { 
 
        $li.addClass('hide'); 
 
        //$select.addClass('hide'); // Hide options 
 
       } 
 
      }); 
 
     } else { 
 
      $select.addClass('hide'); 
 
     } 
 
    }); 
 
});

.hide { 
 
    display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="autocomplete" class="autocomplete"> 
 

 
<ul class="autocomplete-content hide"> 
 
    <li>example</li> 
 
    <li>example 2</li> 
 
    <li>test</li> 
 
</ul>

Answer 3

Вы должны установить класс hide в li вместо ul На keyup случае #autocomplete перебирать li с, что одна содержит значение текстового поля удалить класс hide от этого и добавить класс hide который не содержится.

$(document).on('keyup', '#autocomplete', function() { 
 
    var text = $(this).val(); 
 

 
    $('.autocomplete-content li').each(function() { 
 
     if ($(this).text().trim().indexOf(text) > -1) { 
 
      $(this).removeClass('hide'); 
 
     } else { 
 
      $(this).addClass('hide'); 
 
     } 
 
    }); 
 
});

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" id="autocomplete" class="autocomplete"> 
 
<ul class="autocomplete-content"> 
 
    <li class="hide"><img src="test.jpg"> example</li> 
 
    <li class="hide"><img src="test.jpg"> example 2</li> 
 
    <li class="hide"><img src="test.jpg"> test</li> 
 
</ul>