如何仅通过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>