Jets.js Native CSS search engine

This map will find "Larson" in the list by typing "Łąřśøń" and vice versa.

diacriticsMap: {
  a: 'ÀÁÂÃÄÅàáâãäåĀāąĄ',
  c: 'ÇçćĆčČ',
  d: 'đĐďĎ',
  e: 'ÈÉÊËèéêëěĚĒēęĘ',
  i: 'ÌÍÎÏìíîïĪī',
  l: 'łŁ',
  n: 'ÑñňŇńŃ',
  o: 'ÒÓÔÕÕÖØòóôõöøŌō',
  r: 'řŘ',
  s: 'ŠšśŚ',
  t: 'ťŤ',
  u: 'ÙÚÛÜùúûüůŮŪū',
  y: 'ŸÿýÝ',
  z: 'ŽžżŻźŹ'
}

*AND

Will find [Mikki Doe] in [Mikki Rurk, John Doe, Mike Vazovsky, Mikki Doe] by search phrase "Doe Mikki" or even "Do ikki"

*OR

Will find [Mikki Rurk, John Doe, Mikki Doe] in [Mikki Rurk, John Doe, Mike Vazovsky, Mikki Doe] by search phrase "Doe Mikki" or even "Do ikki"

*

Will find [Mikki Doe] in [Mikki Rurk, John Doe, Mike Vazovsky, Mikki Doe] by search phrase "ikki Do" (only in this sequence)

In case you want to fetch data from tag's attribute

manualContentHandling: function(tag) {
  return tag.getAttribute('custom');
}

Search in specific column example

var jets = new Jets({
  contentTag: '#jetsContent',
  callSearchManually: true, // must be true to be able call search manually by .search()
  searchInSpecificColumn: true,
  columns: [0, 1] // optional, will add additional attributes of first and second columns only (ignoring others)
});

jets.search('phrase', 0); // will search in first column only
jets.search('phrase'); // will search in all columns

In case you want to toggle rows with animation

hideBy: 'opacity: 0; height: 0;'

Don't forget to specify additional CSS rules for rows animation

#jetsContent li {
  height: 22px;
  overflow: hidden;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

Beware using this with huge lists as it may be resource-intensive!

By default rows are hidden by

hideBy: 'display: none'

didSearch: function(search_phrase) {
  console.log(search_phrase);
}

Default implementation mostly depends on provided options but in simplest way this looks as follows

manualContentHandling: function(tag) {
  return tag && (tag.innerText || tag.textContent) || '';
}

Pseudocode for measuring the execution speed of the various implementations

var intervals = [];
$('#searchInput').on('input', function() {
  var time_start = performance.now();

  // filter the list by condition $(this).val()…

  // wait for main UI thread queue to be performed
  setTimeout(function() {
    var time_end = performance.now();
    intervals.push(time_end - time_start);

    // get average execution time
    var average_execution_time = intervals.reduce(function(total, item) {
      return total + item;
    }, 0) / intervals.length;
  }, 0);
});