Javascript 页面搜索可搜索所有关键字

Question

我正在尝试创建一个页面搜索，无论搜索关键字的顺序如何，该搜索都会在页面的某个容器内进行搜索例如如果我输入“This is an apple”，结果应该是包含“This”、“is”、“an”、“apple”的任何内容。

我没有收到任何错误，但似乎没有任何反应

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;
        }
 });

Demonstration

请注意，我还做了一些其他细微的更改，例如在 /[\s\.]/ 上分割，而不仅仅是在空格上分割。