Filter And Search Entries In List View - JsLocalSearch

JsLocalSearch is a small and fast jQuery client-side filter plugin which can be used to filter and search a list of elements you provide. Supports both plain text and HTML content.

How to use it:

1. To get started, include both jQuery library and the JsLocalSearch plugin on the html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/JsLocalSearch.js"></script>

2. Create a list of elements you'd like to filter through.

• .contsearch: container element
• .gsearch: item element

<div class="contsearch">
  <div class="gsearch">List Item 1</div>
</div>
<div class="contsearch">
  <div class="gsearch">>List Item 2</div>
</div>
<div class="contsearch">
  <div class="gsearch">>List Item 3</div>
</div>
...

3. Create a search field to filter through the list.

<input type="text" id="gsearchsimple" placeholder="Search...">

4. Create an empty container for the plugin.

<div id="localSearchSimple"></div>

5. Initialize the plugin on the empty container and done.

$(function(){
  $('#localSearchSimple').jsLocalSearch();
});

6. Highlight the matched items instead of hidding the unmatched items.

$('#localSearchSimple').jsLocalSearch({
  "action": "Mark",
  "actionok": "mark",
  "actionko": "unmark",
  "html_search": true
});

.mark {
  background-color: #d7ffe7 !important
}

.mark .gsearch{
  font-size: 20px
}

.unmark {
  background-color: #e8e8e8 !important
}

.unmark .gsearch{
  font-size: 10px
}

7. Highlight the matched characters while typing in the search field.

$('#localSearchSimple').jsLocalSearch({
  "action": "Show"
});

8. You can also specify the descriptions and keywords for list items as follows:

<div class="contsearch">
  <div class="gsearch"
       data-description="Description" 
       data-keywords="kw1, kw2, kw3">
       List Item 1
  </div>
</div>

$('#localSearchSimple').jsLocalSearch({
  "action": "Show",
  "keyword_search": true,
  "description_search": true,
  "html_search": true,
  "mark_text": "si"
});

9. Specify the min number of characters to trigger the live search functionality. Default: 3.

$('#localSearchSimple').jsLocalSearch({
  "amincaracteres": 2
});

---

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