Javascript onpage搜索所有關鍵字搜索

我試圖創建onpage搜索，在頁面的某個容器內進行搜索，而不管搜索關鍵字的順序如何，例如如果我放入「這是一個蘋果」，結果應該是包含「This」，「is」，「an」，「apple」的任何東西。Javascript onpage搜索所有關鍵字搜索

我沒有得到任何錯誤，但似乎沒有被髮射了

使用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>

來源

2015-05-13 user2809321

this，在你最內部循環，是一個字符串，而不是輸入（實際上它是String的一個實例，它引入了另一個難點）。 indexOf返回找到的元素的索引。

變化

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

到

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

Demonstration

請注意，我也/[\s\.]/做了其他一些小的變化，比如分裂而不僅僅是空間。

來源

2015-05-13 15:13:16

剛纔所作的修改，我試圖把容器但沒有中存在的文本似乎仍然發射了：/ – user2809321

啊是的，我看了一下你的演示和它的工作完美的嘗試在我的代碼中，它也很好，謝謝！ – user2809321

我做了這個變化和它的工作：

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

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

     } 
    });

來源

2015-05-13 15:34:49 Hidran

Javascript onpage搜索所有關鍵字搜索

回答

相關問題