JQuery中的活動搜索欄

Question

我正在嘗試為項目列表創建搜索選項。 這樣，用戶可以在列表中搜索特定項目。 但是，我遇到了幾個問題。 我的列表同時使用跨度和圖像。 我創建的用於按范圍對列表進行排序的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元素之前加載腳本，則將keyup綁定放在ready函數中。
2. 隱藏李不跨。 使用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（）。