Question

我尝试创建一个在页面的某个容器内搜索的onpage搜索，无论搜索关键字的顺序如何例如如果我放入＆＃34;这是一个苹果＆＃34;结果应该是任何包含＆＃34;＆＃34;，＆＃34;＆＃34;，＆＃34;＆＃34;，＆＃34; apple＆＃34;。

我没有得到任何错误但似乎没有任何错误

使用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\.]/而不是仅仅在空格上进行拆分。

Answer 2

我做了这个改变并且有效：

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

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

        }
   });

搜索所有关键字的Javascript onpage搜索

2 个答案: