Making an emoji search engine

Last year, I was working as a English teacher online and found myself wanting to reference emojis during class in a quick and easy manner. The sites that showed up on Google were a bit clunky and overfilled with information. To that end, I wrote a simple one page website to search for Emojis and I currently host it using GitHub and Netlify:

https://polite-kitten-0cf73e.netlify.app/

Check it out! It’s live: https://polite-kitten-0cf73e.netlify.app/

Because of my own inclinations and “the vanilla JavaScript guy” Chris Ferdinandi, I decided to avoid using any major libraries like React, Vue, etc. and write the code as simply as possible using vanilla JavaScript. I used TailwindCSS to streamline styling, however. I did, also, want to have fuzzy search matching. Since this has already been created quite a few times, I decided to find a small library to do this, rather than recreating the wheel. To that end, I chose Fuse.js:

// SEARCH VIA FUSE.js

function emojiSearch(e) {

  const emojisContainer = document.getElementById("emojisDiv");
  emojisContainer.innerHTML = "";

  const options = {
    includeScore: false,
    findAllMatches: false,
    threshold: 0.2,
    keys: ['description', 'keywords']
  }
  const fuse = new Fuse(emojisObject, options)
  const result = fuse.search(e.target.value, {limit: 33})

  result.forEach(result => {
    emojisContainer.innerHTML +=
    '<button onclick="copyEmoji(event)" class="transition ease-in-out delay-0 hover:-translate-y-1 hover:scale-110 duration-300 tooltip" data-text="'+ result.item.description +'">' + result.item.emoji + '</button>';
  });
}

Originally, I tried to simply use Array.search(), but one or two letters searches took forever. It was important to me that the search feature was instant, with no need to press Enter or click a button.

Finally, the emoji’s needed to be copyable so that I could paste them anywhere I needed and I implemented a simply click to copy feature.

// FUNCTION TO COPY EMOJI

function copyEmoji(e) {
  navigator.clipboard.writeText(e.target.innerHTML);
  e.target.setAttribute('data-text','Copied!')
}

For the curious, I found a list of emojis in JSON format somewhere online and edited it a bit to remove fluff and turn it into a regular JavaScript object.

In the end, the site does exactly what I want and I've used it quite a few times already. I had some other fun ideas, like making an emoji 8 ball, or random emoji generator, but haven’t yet taken the time to make those.