使用JavaScript在HTML中搜索功能

Question

我試圖用Javascript創建搜索功能，但它不起作用。

function contains(text_one, text_two) { 
    if (text_one.indexof(text_two) != -1) 
     return true; 
} 

$("#searchText").onkeyup(function(){ 
    var searchText = $("searchText").val().toLowerCase() 
    $("ul li").each(function() { 
     if (!contains($(this).text().toLowerCase(), searchText)) 
      $(this).hide(); 
     else 
      $(this).show(); 
    }); 
}); 

Answer 1

您可以使用開發人員控制檯自行調試所有這些問題。如果您在瀏覽器中按F12，您將能夠看到您的JS代碼正在引發的所有錯誤並解決它們。

從上面的，我可以看到你已經在你的代碼的幾個問題：

• 你應該使用indexOf，不indexof，因爲JS是區分大小寫的
• 的$('searchText')選擇缺少id前綴：$('#searchText')
• jQuery沒有onkeyup方法，它只是keyup。

另外請注意，您可以通過使用toggle()，只是返回在功能indexOf比較的結果提高了邏輯。試試這個：

function contains(text_one, text_two) { 
    return text_one.toLowerCase().indexOf(text_two.toLowerCase()) != -1; 
} 

$("#searchText").keyup(function(){ 
    var searchText = $(this).val(); 
    $("ul li").each(function() { 
     $(this).toggle(contains($(this).text(), searchText)); 
    }); 
}); 

Example fiddle