esm.run @nberlette/emoji demo

by Nicholas Berlette

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@geist-ui/[email protected]/dist/style.css">
<div class="wrapper">

  <div class="zi-card">
    <input 
      type="search" 
      name="query" 
      id="query"
      class="zi-input big query" 
      placeholder="Type anywhere to search" 
    />
  </div>
  <ul id="results" class="results zi-card pin">
    <li><span class="emoji">🔥 </span> &nbsp; <strong><small>results will appear here as you type</small></strong></li>
  </ul>

</div>

CSS

html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}
body {
  height: calc(100vh-2em);
  padding: 1em 0 0 0;
}
.wrapper {
  margin: 0 1em;
}
input.query {
  width: 95%;
}
ul.results {
  margin-top: 1em;
  list-style-type: none;
  padding: 1em 2em !important;
}
.results li {
  list-style-type: none !important;
  list-style: none !important;
  margin: 0;
  padding: 0;
}

JavaScript

// See https://www.npmjs.com/package/@nberlette/emoji documentation.
import emoji from 'https://esm.run/@nberlette/emoji';

const get_emoji = (query, num = 10) => Object.entries(emoji).filter(([i,e]) => ~i.indexOf(query)).slice(0,num);

const $ = document.querySelector.bind(document);

let query = '', results = [];

$('.query').addEventListener('keyup', function (event) {
  query = event.target.value.trim().toLowerCase();
  if (query.length > 0) {
    results = get_emoji(query);
    $('#results').innerHTML = '';
    for (let [resName, resEmoji] of results) {
      const $el = document.createElement('li');
      $el.innerHTML = `<span class="emoji">${resEmoji}</span> &nbsp; <strong>${resName}</strong>`;
      $('#results').appendChild($el);
    }
  }
});

document.addEventListener('keydown', function (event) {
	$('.query').focus();
})