Instant search provides Search & Re-order as you type function using only plain javascript with keeping user interface functional.
It searches through hundreds of elements in less than 0.5s without freezing the browser and it places the top matching elemetns to the top with the keyword highlighted.
Need a very fast searching function
Realying on front-end for search
If your device browser could render the large data, Instant search will work fine! Although we recommend using Instant Search to maximum of 1000 records.
Instant search is just a javascript class. It takes an object as parameter. Parameters are optional if required classes exist in DOM. Each record must have data-id attribute with a unique value
Example - Dynamic data
Simple Example - Quick Start
<script src="./search.js"></script>
<body>
<input id="find">
<!-- container -->
<div id="employeesList">
<!--record-->
<!--data-id is required and must be unique-->
<section class="search-item" data-id="9021">
<div class="field"> John Smoith</div>
<div>
<a>link to John profile</a>
</div>
<div class="field"> Accounting Department</div>
</section>
<!--record-->
<!--data-id is required and must be unique-->
<section class="search-item" data-id="9321">
<div class="field">Oscar Wilde</div>
<div>
<a>link to Oscar profile</a>
</div>
<div class="field">Marketing Department </div>
</section>
</div>
</body>
<script>
let instanceSearch = new InstantSearch({
containerSelector: "#employeesList"
})
</script>| Parameter Name | Type | Description | Default Value |
|---|---|---|---|
containerSelector |
css selector | string | selector for the element that wraps all the records | "#result" |
searchInputSelector |
css selector | string | selecotor for the input element where users types a keyword to search for | "#find" |
searchItemSelector |
css selector | string | selector for the element that contains the record | ".search-item" |
fieldSelector |
css selector | string | selector for the element that contains the record text | ".field" |
resultCount |
integer | number of records that will be dragged to the top if they contain the search keyword | 10 |
highlightColor |
hexcolor | string | background of the matching keyword | "#ffeb3b" |
disableStyle |
bool | if set to true styling will not be applied | false |