Full Text Search Plugin For jQuery And Bootstrap - full-search.js

File Size: 8.83 KB
Views Total: 4583
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Full Text Search Plugin For jQuery And Bootstrap - full-search.js

full-search.js is a jQuery & Bootstrap plugin for full-text searching with support of keyword highlighting and smooth anchor scrolling.

How to use it:

1. Load the Bootstrap's stylesheet in the head section of your html page.

<link rel="stylesheet" href="bootstrap.min.css">

2. Create a search field for full-text searching on your webpage.

<input type="search" class="form-control" id="search" placeholder="Search">

3. Create the html template for the search results.

<div class="search-result" style="display:none">
  <h4>Title</h4>
  <ul class="result-section">
  </ul>
  <h4>Content</h4>
  <ul class="result-content">
  </ul>
</div>

4. Add the text content you want to search through into a container with an unique ID 'result-list'.

<div class="col-lg-12" id="result-list">

  <h4 id="a">Lorem ipsum dolor sit amet</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt malesuada urna et ullamcorper. Praesent ac rhoncus nisi, ut aliquam leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla nec orci vestibulum, malesuada dolor a, ultricies tortor. Etiam vel nibh eros. Praesent tincidunt feugiat ornare. Fusce a quam tincidunt, facilisis massa sed, sagittis arcu. Curabitur vel ligula sollicitudin, ullamcorper odio dapibus, vehicula mi. Sed vitae aliquet metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin aliquet arcu quis varius maximus. Duis ac aliquam eros. Phasellus elementum commodo porttitor. Cras ac ante sit amet lacus rhoncus viverra.
  </p>

  <h4 id="b">Morbi fermentum</h4>
  <p>Morbi fermentum, ligula sed sollicitudin consectetur, dui eros eleifend velit, at consectetur dolor lacus eu quam. Donec hendrerit, nibh eu consectetur ullamcorper, libero quam imperdiet mauris, sed eleifend mauris risus a leo. Donec accumsan, ligula eget tempor egestas, risus nunc interdum sapien, in volutpat est diam quis risus. Morbi ut congue turpis. Nulla nunc est, tristique commodo leo ac, porta rutrum sem. Suspendisse condimentum diam id tellus varius hendrerit. Duis molestie euismod odio vitae egestas. Quisque vestibulum velit non pellentesque varius. Duis odio augue, tincidunt ut libero et, efficitur rhoncus orci.
  </p>

  ...
 
</div>

5. Load JQuery library together with the anchor.js and jquery.full-search.js at the bottom of the page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/anchor.js"></script>
<script src="js/jquery.full-search.js"></script>

6. Initialize the plugin with options.

$('#search').fullsearch({
  highlight: true,
  search_data: ".search-result",
  search_title: ".result-section",
  search_content: ".result-content",
  list: "#result-list",
  nodata: "No Results Found",
});

This awesome jQuery plugin is developed by magic007. For more Advanced Usages, please check the demo page or visit the official website.