Question

我正在尝试设置一个搜索，它会在单个html文件中为我提供多个搜索结果。我们假设html包含以下摘录：

 ./SaveEccKey
Error code = -132
Error code again = 0

如果我现在要搜索“Lorem”，我想得到包含“Lorem”（=第一个和第二个div = 2个搜索结果）的类“chapter”的每个div的结果。每个搜索结果应该只是一个内容为h1的链接，并在点击时转到相应的div。

示例：

<input id="search" type="text">
<div class="chapter" id="chap1">
    <h1>Chapter 1 - Introduction</h1>
    <p>Lorem Ipsum. Lorem Lorem Ipsum</p>
</div>
<div class="chapter" id="chap2">
    <h1>Chapter 2 - Say hello</h1>
    <p>Lorem Ipsum. Ipsum Lorem Ipsum</p>
</div>
<div class="chapter" id="chap3">
    <h1>Chapter 3 - Say bye</h1>
    <p>Ipsum Ipsum. Ipsum Ipsum Ipsum</p>
</div>

理想情况下，在删除搜索文本或点击其中一个结果之前，不应显示原始内容。

非常感谢！非常感谢您的帮助！

Answer 1

经过几次尝试后，我现在正好拥有我想要的东西（即使代码可能不是100％写得好）。：）

谢谢Gregg！

这是最终结果的链接：

$(function(){

$('#search').keyup(function(){
    var searchText = $('input#search').val();
    if(searchText.length > 0){
        $('div.chapter:contains(' + searchText + ')').show();           
        $('div.chapter:not(:contains(' + searchText + '))').hide();
        $('p.weg').hide();
        $('a').addClass("blue");
        $('pre').addClass("show");            
    }else{
        $('div.chapter').show();  
        $('p.weg').show();
        $('a').removeClass("blue");
        $('pre').removeClass("show");            
    }
});

...

https://jsfiddle.net/878dkrd9/106/

Answer 2

喜欢这个？：https://jsfiddle.net/878dkrd9/

$(function(){

    $('#search').keyup(function(){
        var searchText = $('input#search').val();
        if(searchText.length > 0){
            $('div.chapter:contains(' + searchText + ')').show();
            $('div.chapter:not(:contains(' + searchText + '))').hide();
        }else{
            $('div.chapter').show();
        }
    });

    // Required to make the jQuery contains NON-Case-sensitive
    jQuery.expr[':'].Contains = function(a, i, m) {
      return jQuery(a).text().toUpperCase()
          .indexOf(m[3].toUpperCase()) >= 0;
    };

    // OVERWRITES old selecor
    jQuery.expr[':'].contains = function(a, i, m) {
      return jQuery(a).text().toUpperCase()
          .indexOf(m[3].toUpperCase()) >= 0;
    };
});

来自单个文件内的搜索的多个搜索结果

2 个答案: