Панель активного поиска в JQuery

Question

Я пытаюсь создать опцию поиска для списка элементов. Таким образом, пользователь может выполнить поиск определенного элемента в списке. Тем не менее, у меня есть пара вопросов. Мой список использует как span, так и изображения. Jquery, который я создал для сортировки, сортирует список по промежуткам только отлично, однако, когда я пытаюсь использовать активный поиск, он ничего не делает. Вот мой пример кода:

<input type="text" name="searchList" id="searchInput" placeholder="Type Here To Search" /> 
<ul id="lessonList" class="lessonlist"> 
<li><span class="name">Lesson 1</span> 
    <img src="images/lessonFiller1.png" width="45%" height="45%"/> 
</li> 
<li><span class="name">Lesson 2</span> 
    <img src="images/lessonFiller2.png" width="45%" height="45%"/></li> 
<li><span class="name">Lesson3</span> 
    <img src="images/lessonFiller3.png" width="45%" height="45%" /></li> 
<li><span class="name">Lesson 4</span> 
    <img src="images/lessonFiller4.png" width="45%" height="45%"/></li> 
<li><span class="name">Lesson 5</span> 
    <img src="images/lessonFiller5.png" width="45%" height="45%"/></li> 
</ul> 

Опять мой сорт JQuery работает просто отлично:

$(document).ready(function(e) { 
var desc = $(this).hasClass("asc"), 
    list = $("#lessonList"); 
list.append(list.children().get().sort(function(a, b) { 
    var aProp = $(a).find("span.name").text(), 
     bProp = $(b).find("span.name").text(); 
    return (aProp > bProp ? 1 : aProp < bProp ? -1 : 0) * (desc ? -1 : 1); 
})); 
$(this).toggleClass("desc", desc) 
     .toggleClass("asc", !desc) 
     .siblings().removeClass("asc desc"); 
e.preventDefault();}); 

Однако, когда я пытаюсь использовать вход для создания активного поиска ничего не происходит. Вот его код:

$('#searchInput').keyup(function(){ 

//var that = this, $allListElements = $('ul > li'); 
var valThis = $(this).val(); 
var list = $('ul li span'); 

list.each(function(){ 
var text = $(this).text().toLowerCase(); 
    (text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide();});}); 

Что я делаю неправильно? Это что-то, что я могу сделать? Заранее спасибо.

Answer 1

Есть несколько вопросов,

1. где вы в том числе вашего сценария? в голове или в последнем теле? Если скрипт загружен до создания элементов html dom, тогда установите привязку клавиш в готовой функции.
2. скрыть li не span. Используйте parent() для отображения/скрытия.

Ниже код должен работать, и ссылка является https://jsfiddle.net/4pbp5dhr/

$(document).ready(function(e) { 
var desc = $(this).hasClass("asc"), 
list = $("#lessonList"); 
list.append(list.children().get().sort(function(a, b) { 
var aProp = $(a).find("span.name").text(), 
    bProp = $(b).find("span.name").text(); 
    return (aProp > bProp ? 1 : aProp < bProp ? -1 : 0) * (desc ? -1 : 1); 
})); 
$(this).toggleClass("desc", desc) 
    .toggleClass("asc", !desc) 
    .siblings().removeClass("asc desc"); 
//e.preventDefault(); 

//Move the search input inside ready 
$('#searchInput').keyup(function(){ 

//var that = this, $allListElements = $('ul > li'); 
var valThis = $(this).val(); 
console.log(valThis); 
var list = $('ul li span'); 

list.each(function(){ 
    var text = $(this).text().toLowerCase(); 
    (text.indexOf(valThis) == 0) ? $(this).parent().show() :  $(this).parent().hide();}); 
}); 

}); 

я прокомментировал preventDefault().