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

我正在尝试创建一个onpage搜索，该搜索在页面的特定容器中进行搜索，而不管搜索关键字的顺序如何 e、 如果我输入“This is a 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> 

$（文档）.ready（函数（）{
$（“.searchable”）.hide（）；
});
函数searchFunction（）{
var result=$（“输入[name='searchHelp']”）val（）；
结果=结果。拆分（“”）；
$（'.searchable'）。每个（函数（）{
var text=$（this.html（）.toString（）；
text=text.split（“”）；
show=false；
$.each（结果，函数（）{
if（text.indexOf（$（this.val（）））{
show=true；
}
});
如果（显示）{
$（this.show（）；
}
});
}

这是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>

Lorem ipsum door sit amet，是一位杰出的职业经理人。伊库利斯·奥奇维尔·菲尼布斯·斯克利斯。阿利奎姆·埃拉特·帕特。这是一个巨大的侵权者。这是一条龙之门

Lorem ipsum door sit amet，是一位杰出的职业经理人。伊库利斯·奥奇维尔·菲尼布斯·斯克利斯。阿利奎姆·埃拉特·帕特。这是一个巨大的侵权者。这是一条龙之门

Lorem ipsum door sit amet，是一位杰出的职业经理人。伊库利斯·奥奇维尔·菲尼布斯·斯克利斯。阿利奎姆·埃拉特·帕特。这是一个巨大的侵权者。这是一条龙之门

Lorem ipsum door sit amet，是一位杰出的职业经理人。伊库利斯·奥奇维尔·菲尼布斯·斯克利斯。阿利奎姆·埃拉特·帕特。这是一个巨大的侵权者。这是一条龙之门

Lorem ipsum door sit amet，是一位杰出的职业经理人。伊库利斯·奥奇维尔·菲尼布斯·斯克利斯。阿利奎姆·埃拉特·帕特。这是一个巨大的侵权者。这是一条龙之门

这个

，在您最内部的循环中，是一个字符串，而不是一个输入（事实上，它是

字符串

的一个实例，这带来了另一个困难）。和

indexOf

返回找到的元素的索引

改变

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

到

---

请注意，我还做了一些其他的小改动，比如在

/[\s\.]/

上拆分，而不仅仅是在空间上拆分。

我做了这个改动，它成功了：

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

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

        }
   });

---

刚编辑完，我试着在容器中放置一个文本，但似乎什么都没有激发出来：/啊，是的，我看了你的演示，效果很好，在我的代码中尝试过，也很好，谢谢！

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

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

        }
   });