CSS Search? That's interesting

Imagine you have a list of data rendered in your application, most of the time it will be a list of records from a database. one of the most difficult tasks when developing an application is the functionality of searching through the data effectively.

jets.js solves this problem for us. As the documentation states it is a native CSS search engine. Pretty cool huh? i know.

How does it work?

By applying a dynamic CSS rule in the <style> tag, the browser decides which item to show or hide when searching. the best part is, it works on everything. <ul>,<ol>,<table><div> 's you name it.

Getting started

Jets.js can be installed using both npm and bower

bower install jets or npm install jets

you can also use the bower cdn.

jets.js on github

Usage

Download the library and include the script on your page.

<script src="./jets.min.js"></script>

<input type="search" id="jetsSearch">
<ul id="jetsContent">
  <li>Barry Williamson</li>
  <li>Francis Reeves</li>
  <li>…</li>
</ul>

include the script tag in the body section. That's it.

var jets = new Jets({
  searchTag: '#jetsSearch',
  contentTag: '#jetsContent'
});

Note: This example is taken directly from the jets.js official page.

Example

Check the example below on how to get stared.

Jets.js is created By Denis Lukov
visit jets.js