搜索所有關鍵字的Javascript頁面搜索

Question

我試圖創建一個頁面搜索，無論搜索關鍵字的順序如何，都可以在頁面的特定容器內進行搜索，例如，如果我輸入“ This is a apple”，則結果應為包含“ This”，“是”，“一個”，“蘋果”。

我沒有收到任何錯誤，但似乎沒有任何反應

Javascript / jQuery

<script type="text/javascript">
$( document ).ready(function() {
  $(".searchable").hide();


});
function searchFunction() {
    var result = $("input[name='searchHelp']").val();
    result = result.split(" ");
    $('.searchable').each(function(){
       var text = $(this).html().toString();
       text = text.split(" ");
       show = false;
       $.each(result,function(){
            if (text.indexOf($(this).val())) {
                show = true;
            }
       });
       if (show) {
            $(this).show();
       }
    });

}
</script> 

這是HTML以防萬一

<div class="search-help-bar" name = "searchBox">
    <input type="text" name="searchHelp" class="help">
    <input type="submit" class="search-btn" onclick = "searchFunction();">
</div>
    <ul id="resultsList">
        <li class = "searchable"><a href="/">This is result 1</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis orci vel finibus scelerisque. Aliquam erat volutpat. Ut ut felis ac magna ultricies ullamcorper et id tortor. Sed porta quis orci a iaculis.</p></li>
        <li class = "searchable"><a href="/">This is result 2</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis orci vel finibus scelerisque. Aliquam erat volutpat. Ut ut felis ac magna ultricies ullamcorper et id tortor. Sed porta quis orci a iaculis.</p></li>
        <li class = "searchable"><a href="/">This is result 3</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis orci vel finibus scelerisque. Aliquam erat volutpat. Ut ut felis ac magna ultricies ullamcorper et id tortor. Sed porta quis orci a iaculis.</p></li>
        <li class = "searchable"><a href="/">This is result 4</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis orci vel finibus scelerisque. Aliquam erat volutpat. Ut ut felis ac magna ultricies ullamcorper et id tortor. Sed porta quis orci a iaculis.</p></li>
        <li class = "searchable"><a href="/">This is result 5</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis orci vel finibus scelerisque. Aliquam erat volutpat. Ut ut felis ac magna ultricies ullamcorper et id tortor. Sed porta quis orci a iaculis.</p></li>
    </ul>

Answer 1

在您最內層的循環中， this是一個字符串，而不是輸入（實際上，它是String的實例，這帶來了另一個困難）。 indexOf返回找到的元素的索引。

更改

$.each(result,function(){
        if (text.indexOf($(this).val())) {
            show = true;
        }
});

至

 $.each(result,function(_,v){
        if (text.indexOf(v)!==-1) {
            show = true;
        }
 });

示范

請注意，我還進行了其他一些小的更改，例如在/[\\s\\.]/上/[\\s\\.]/而不是僅在空間上/[\\s\\.]/ 。

Answer 2

我進行了更改，並且有效：

 $.each(result,function(ele,val){

        if (text.indexOf(val)!==-1) {
            show = true;

        }
   });