如何僅通過H2標籤進行搜索

Question

我有一個包含大量H2和段落的頁面。 如何使javascript/ajax（或其他）的搜索欄只通過H2標籤下拉建議和沒有數據庫搜索？

Answer 1

您可以使用jQuery來搜索出現:contains()。該腳本還查找<h2>的錨點（id）以鏈接它們。

// Make :contains() case insensitive 
 
$.expr[":"].contains = $.expr.createPseudo(function(arg) { 
 
    return function(elem) { 
 
    return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; 
 
    }; 
 
}); 
 

 
// Search on type 
 
var result; 
 
$('#search').on('keyup', function() { 
 
    result = ''; 
 
    // Search h2 caontaining search term 
 
    $('h2:contains("' + $('#search').val() + '")').each(function(index) { 
 
    result += '<li><a href="#' + $(this).attr('id') + '">' + $(this).text() + '</a></li>'; 
 
    }); 
 
    // Show results 
 
    $('#searchResults').html('<ul>' + result + '</ul>'); 
 
});

#searchResults { 
 
    background: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Search titles: 
 
<input id="search" /> 
 
<div id="searchResults"></div> 
 

 
<h2 id="1">Lorem ipsum dolor sit amet</h2> 
 
<p>consectetur adipiscing elit.<br/>Ut venenatis, diam nec laoreet rutrum, est dolor vehicula leo, eu euismod ex risus id felis.<br/>Nam non odio eget libero commodo iaculis ac sed leo.<br/>Sed velit ex, elementum et lobortis id, porta nec nunc.<br/>Curabitur gravida risus in blandit cursus.<br/>onec fermentum nulla sem, et interdum lectus tincidunt id.<br/>Sed pharetra odio arcu.<br/> Interdum et malesuada fames ac ante ipsum primis in faucibus.<br/>Vestibulum semper lorem leo, sed congue massa posuere et.<br/>Proin porta lorem eu metus ultricies dictum.<br/>Cras sit amet molestie nisi.<br/>Phasellus eu congue ipsum, id tristique urna.<br/>Quisque in leo vel nisi rutrum auctor ut ac mauris.<br/>Maecenas consectetur ipsum ultricies orci egestas fringilla.<br/>Suspendisse ac rhoncus massa, eget fermentum augue.<br/> Proin eleifend laoreet velit, sit amet finibus sem volutpat pharetra.<br/>Phasellus feugiat risus in tortor pulvinar aliquam. 
 
</p> 
 

 
<h2 id="2">Etiam tincidunt nulla vel justo suscipit</h2> 
 
<p>eget interdum nisi suscipit.<br/>Phasellus in tempor mi.<br/>Phasellus venenatis justo mollis suscipit iaculis.<br/>Donec interdum congue lorem.<br/>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi eget massa id neque vehicula accumsan eu non sem.<br/>Cras pretium lobortis quam, ullamcorper tempus eros viverra non.<br/>Morbi id scelerisque est.<br/>Praesent dictum turpis quam, nec maximus quam cursus ac.<br/>Nam porta quam sit amet velit imperdiet elementum.<br/>Curabitur at orci condimentum, porta enim quis, fermentum orci.<br/>Mauris arcu mauris, tempor at blandit nec, dictum sed augue.<br/>Sed convallis orci vitae lectus commodo posuere.<br/>Aliquam erat volutpat.<br/>Integer sed gravida felis. 
 
</p> 
 

 
<h2 id="3">Praesent eu sem ex</h2> 
 
<p>In hac habitasse platea dictumst.<br/>Duis interdum turpis sit amet libero consequat, a efficitur turpis vulputate.<br/>Sed non diam malesuada, dignissim leo ut, vulputate nulla.<br/>Quisque tincidunt arcu sed dapibus fermentum.<br/>Vestibulum vitae ultrices velit, ac posuere quam.<br/>Praesent ac ex vitae nisl rhoncus faucibus in at justo.<br/>Pellentesque malesuada imperdiet finibus.<br/>Nunc at aliquam enim, dictum ultricies lectus.<br/>Nam posuere nulla elementum augue fermentum tincidunt.<br/>Sed a tortor non turpis tristique viverra.<br/>Nulla sagittis, sapien vel mollis porttitor, diam felis tempus mi, sit amet scelerisque libero quam sed justo. 
 
</p> 
 

 
<h2 id="4"> 
 
Nam non odio viverra mauris 
 
</h2> 
 
<p> 
 
    aliquam consectetur vel sit amet nisl.<br/>Nam scelerisque turpis ut mattis consectetur.<br/>Donec ut sem iaculis, hendrerit sem at, scelerisque lacus.<br/>Cras sit amet quam bibendum, rutrum nibh vitae, eleifend neque.<br/>Curabitur tincidunt fermentum nibh nec viverra.<br/>Proin tincidunt, tortor vitae sollicitudin commodo, tellus felis commodo felis, nec dictum tellus lorem in nibh.<br/>Cras congue justo at ultrices bibendum. 
 
</p> 
 

 
<h2 id="5"> 
 
Praesent facilisis dapibus ante, 
 
</h2> 
 
<p> 
 
    at consectetur risus dictum et.<br/>Vestibulum ut quam turpis.<br/>Maecenas eu eleifend purus.<br/>Morbi risus mi, feugiat eget auctor eu, convallis in sapien.<br/>Sed egestas vitae lacus sit amet aliquam.<br/>Nullam ullamcorper vulputate ligula sed pulvinar.<br/>Curabitur condimentum mi quis nulla commodo, vitae laoreet magna vulputate.<br/>Ut ultricies ex sit amet eros mattis, vitae faucibus elit blandit. 
 
</p> 
 

 
<h2 id="6">Mauris ac augue imperdiet</h2> 
 
<p> 
 
    volutpat quam non, cursus leo.<br/>Sed imperdiet semper interdum.<br/>Vivamus blandit est sem, eget facilisis turpis accumsan at.<br/>Duis blandit nisi in mattis pellentesque.<br/>Mauris vitae turpis ullamcorper, tempor nunc et, commodo tellus.<br/>Quisque quis scelerisque ex, quis tincidunt sapien.<br/>Curabitur erat urna, fringilla eget velit in, efficitur venenatis nisi.<br/>Nullam facilisis elit velit, ut maximus libero imperdiet quis. 
 
</p>