WILF search

README.md

We Love Icon Fonts search

The search on We Love Icon Fonts is a long requested issue.

To use the search, just drag'n'drop the js file (minfied or unminified) in the bookmarks bar.

You can watch an installation video here: https://vimeo.com/94447449.

wilf-search.js

function init () {
 
  var icons = document.querySelectorAll('section[data-name="preview"] > div > ul > li');
 
  var input = document.createElement('input');
  input.type = 'search';
  input.placeholder = 'Search';
  input.classList.add('searchinput');
  input.style.position = 'fixed';
  input.style.top = '0px';
  input.style.right = '0px';
  input.style.padding = '1em';
  input.style.border = 'solid 0.3em grey';
  input.style.borderTop = 'none';
  input.style.borderRight = 'none';
  input.style.margin = '0';
  input.style.fontSize = '1em';
  input.style.zIndex = '2';
  
  document.body.appendChild(input);
 
  input.addEventListener('keyup', function () {
    search(this.value, icons);
  });
  
}
 
function search (query, ics) {
 
  var string = query.trim().split(' ');
   
  for (var i = 0; i < ics.length; i++) {
    
    var name = ics[i].dataset.text;
    var check = new RegExp(string.join('+.'));
    
    if ( name.match(check) ) {
      
      ics[i].style.display = 'list-item';
      
    } else {
      
      ics[i].style.display = 'none';
      
    }
    
  }

}

init();

wilf-search.min.js

function init(){var e=document.querySelectorAll('section[data-name="preview"] > div > ul > li');var t=document.createElement("input");t.type="search";t.placeholder="Search";t.classList.add("searchinput");t.style.position="fixed";t.style.top="0px";t.style.right="0px";t.style.padding="1em";t.style.border="solid 0.3em grey";t.style.borderTop="none";t.style.borderRight="none";t.style.margin="0";t.style.fontSize="1em";t.style.zIndex="2";document.body.appendChild(t);t.addEventListener("keyup",function(){search(this.value,e)})}function search(e,t){var n=e.trim().split(" ");for(var r=0;r<t.length;r++){var i=t[r].dataset.text;var s=new RegExp(n.join("+."));if(i.match(s)){t[r].style.display="list-item"}else{t[r].style.display="none"}}}init()