Php 在单个文件中搜索的多个搜索结果

我正在尝试设置一个搜索，在一个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>

第一章导言
同侧眼线。同侧眼

第二章-打招呼
同侧眼线。益智

第三章-再见
同侧同侧。同侧同侧

如果我现在要搜索“Lorem”，我想为类“chapter”中包含“Lorem”的每个div（第一个和第二个div=2个搜索结果）获取一个结果。每个搜索结果都应该是一个链接，内容为h1，单击时指向相应的div

例如：

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

<a>Chapter 1 - Introduction</a>

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

您的搜索返回了2个结果

第一章导言
第二章-打招呼

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

多谢各位！非常感谢你的帮助

像这样

---

经过几次尝试，我现在完全得到了我想要的东西（即使代码可能不是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");            
    }
});

---

在javascript函数中创建具有href=“#chap1”（或任何其他您想与其关联的ID）的链接。我建议使用jQuery，因为您可以使用CSS选择器轻松导航。您的示例输出中的链接在哪里？谢谢Gregg，这已经很接近了，但我需要的是结果，文本仅为h1，并且作为链接，这样当单击它时，我可以导航到章节，并恢复整个内容。

$(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");            
    }
});