在單個文件中搜索多個搜索結果

我正在嘗試設置一個搜索，該搜索可以在單個html文件中爲我提供多個搜索結果。讓我們假設HTML包含以下摘錄：在單個文件中搜索多個搜索結果

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

如果我現在想搜索「排版」，我想這應該是包含「排版」（=第一類「章」的每一個DIV結果第二個div = 2的搜索結果）。每個搜索結果應該只是一個鏈接，其內容爲h1，並在點擊時轉到相應的div。

例子：

<p>Your search has returned 2 results.</p> 

<a>Chapter 1 - Introduction</a> 

<a>Chapter 2 - Say hello</a>

理想的情況下，原來的內容，那麼不應該顯示，直到我刪除搜索文本或點擊的結果之一。

非常感謝！非常感激你的幫助！

來源

2015-11-05 Gnarlund

在你的JavaScript函數具有href = 「＃是chap1」創建鏈接（或任何其他你想與它關聯的ID）。我建議使用jQuery，因爲你可以使用CSS選擇器很容易地導航。 * https：//beski.wordpress.com/2009/04/21/scroll-effect-with-local-anchors-jquery/* – Shockwave

您的示例輸出中的鏈接在哪裏？ – Barmar

像這個？：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; 
    }; 
});

來源

2015-11-05 23:06:15

感謝Gregg，這已經越來越接近了，但我需要的僅僅是帶有h1文本的結果以及作爲鏈接，以便在單擊它時導航到該章節並且整個內容被恢復。 – Gnarlund

試了幾次我現在正是我想要的（即使代碼可能不是100％寫得很好）之後。 :)

謝謝格雷格！

這是鏈接到最終的結果是：

$(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/

來源

2015-11-12 17:09:18 Gnarlund

在單個文件中搜索多個搜索結果

回答

相關問題