A jQuery plugin to provide a live filter on a list.
Need tabcomplete for the auto-complete feature
This is the basic html structure needed to use this plugin
<div class="livefilter">
<label class="sr-only" for="input-bts-ex-1">Search in the list</label>
<div class="search-box">
<div class="input-group">
<span class="input-group-addon" id="search-icon1">
<span class="fa fa-search"></span>
</span>
<input type="text" placeholder="Search in the list" id="input-bts-ex-1" class="form-control live-search" aria-describedby="search-icon1" />
</div>
</div>
<div class="list-to-filter">
<ul class="list-unstyled">
<li class="filter-item" data-filter="item 1">item 1</li>
<li class="filter-item" data-filter="item 2">item 2</li>
<li class="filter-item" data-filter="item 3">item 3</li>
<li class="filter-item" data-filter="item 4">item 4</li>
<li class="filter-item" data-filter="item 5">item 5</li>
</ul>
<div class="no-search-results">
<div class="alert alert-warning" role="alert"><i class="fa fa-warning margin-right-sm"></i>No entry for <strong>'<span></span>'</strong> was found.</div>
</div>
</div>
</div>
You can add a clear button to allow the user to clear his filter by adding data-clear="true"
<div class="livefilter" data-clear="true">
<label class="sr-only" for="input-bts-ex-2">Search in the list</label>
<div class="search-box">
<div class="input-group">
<span class="input-group-addon" id="search-icon2">
<span class="fa fa-search"></span>
<a href="#" class="fa fa-times hide filter-clear"><span class="sr-only">Clear filter</span></a>
</span>
<input type="text" placeholder="Search in the list" id="input-bts-ex-2" class="form-control live-search" aria-describedby="search-icon2" />
</div>
</div>
<div class="list-to-filter">
<ul class="list-unstyled">
<li class="filter-item" data-filter="item 1">item 1</li>
<li class="filter-item" data-filter="item 2">item 2</li>
<li class="filter-item" data-filter="item 3">item 3</li>
<li class="filter-item" data-filter="item 4">item 4</li>
<li class="filter-item" data-filter="item 5">item 5</li>
</ul>
<div class="no-search-results">
<div class="alert alert-warning" role="alert"><i class="fa fa-warning margin-right-sm"></i>No entry for <strong>'<span></span>'</strong> was found.</div>
</div>
</div>
</div>
You can add an auto-complete on your filter by adding data-autocomplete="true"
You can allow the user to navigate through matches with the arrow keys by adding data-keys="true"
<div class="livefilter" data-clear="true" data-autocomplete="true" data-keys="true">
<label class="sr-only" for="input-bts-ex-3">Search in the list</label>
<div class="search-box">
<div class="input-group">
<span class="input-group-addon" id="search-icon3">
<span class="fa fa-search"></span>
<a href="#" class="fa fa-times hide filter-clear"><span class="sr-only">Clear filter</span></a>
</span>
<input type="text" placeholder="Search in the list" id="input-bts-ex-3" class="form-control live-search" aria-describedby="search-icon3" />
</div>
</div>
<div class="list-to-filter">
<ul class="list-unstyled">
<li class="filter-item" data-filter="item 1">item 1</li>
<li class="filter-item" data-filter="item 2">item 2</li>
<li class="filter-item" data-filter="item 3">item 3</li>
<li class="filter-item" data-filter="item 4">item 4</li>
<li class="filter-item" data-filter="item 5">item 5</li>
</ul>
<div class="no-search-results">
<div class="alert alert-warning" role="alert"><i class="fa fa-warning margin-right-sm"></i>No entry for <strong>'<span></span>'</strong> was found.</div>
</div>
</div>
</div>
You can show the number of elements in the list which match the filter by adding data-matches="true"
<div class="livefilter" data-clear="true" data-autocomplete="true" data-keys="true" data-matches="true">
<label class="sr-only" for="input-bts-ex-4">Search in the list</label>
<div class="matches">
<span>0</span>
found
</div>
<div class="search-box">
<div class="input-group">
<span class="input-group-addon" id="search-icon4">
<span class="fa fa-search"></span>
<a href="#" class="fa fa-times hide filter-clear"><span class="sr-only">Clear filter</span></a>
</span>
<input type="text" placeholder="Search in the list" id="input-bts-ex-4" class="form-control live-search" aria-describedby="search-icon4" />
</div>
</div>
<div class="list-to-filter">
<ul class="list-unstyled">
<li class="filter-item" data-filter="item 1">item 1</li>
<li class="filter-item" data-filter="item 2">item 2</li>
<li class="filter-item" data-filter="item 3">item 3</li>
<li class="filter-item" data-filter="item 4">item 4</li>
<li class="filter-item" data-filter="item 5">item 5</li>
</ul>
<div class="no-search-results">
<div class="alert alert-warning" role="alert"><i class="fa fa-warning margin-right-sm"></i>No entry for <strong>'<span></span>'</strong> was found.</div>
</div>
</div>
</div>