Emoji Ajax Type Ahead

emoji-ajax-type-ahead.markdown

Emoji Ajax Type Ahead

Ajax type ahead emoji search using the fabulous Fetch API. It started as my own spin on Wes Bos' JS30 Ajax Type Ahead screencast. What followed was my desire to jump on the Codepen emoji bandwagon!

A Pen by Tobi Weinstock on CodePen.

License.

index.html

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <pattern id="pattern"
           x="0" y="0" width="210" height="210"
           patternUnits="userSpaceOnUse" >
    <text class='emoji-pattern' x="0" y="100" width="80" font-size="80">
      🥝
    </text>
    <text class='emoji-pattern' x="100" y="200" width="80" font-size="80">
      🥝
    </text>
  </pattern>
  <rect fill="url(#pattern)" x="0" y="0" width="100%" height="100%"/>
</svg>
<section>
  <h1>Emoji Background Generator</h1>
  <h2>Cause emojis got yo back!</h2>
  <form class="search-form">
    <input type="text" class="search" placeholder="Filter for Emoji Magic">
    <div class="emoji-container">
      <ul class="suggestions">
      </ul>
    </div>
  </form>
  <p>Search and set your favourite emoji as your background pattern!</p>
</section> 

script.babel

const endpoint = 'https://raw.githubusercontent.com/github/gemoji/master/db/emoji.json';
const emojis = [];
const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');
const emojiPattern = Array.from(document.querySelectorAll('.emoji-pattern'));

fetch(endpoint)
  .then(blob => blob.json())
  .then(data => emojis.push(...data))
  .then(setTimeout(() => {
    renderMatches(emojis);
  }, 100))
  .catch((err) => {
    console.log(err);  
  })

function findMatches(wordToMatch, emojis) {
  return emojis.filter(emoji =>
    emoji.aliases.some(alias => alias.indexOf(wordToMatch) !== -1)
  );
}

function renderMatches(arr) {
  const html = arr.map(emo => {
    const {
     emoji,
     description
    } = emo;
    return `
      <li class="icon">
        <abbr title="${description}">${emoji}</abbr>
      </li>
    `
  }).join('');
  suggestions.innerHTML = html;
}

function updateMatches() {
  const matchArray = findMatches(this.value, emojis);
  renderMatches(matchArray);
}

function changeBackground(e) {
  if (!e.target.matches('abbr')) return;
  const emoj = e.target.innerText;
  emojiPattern.map(pattern => pattern.textContent = emoj);
  
}

searchInput.addEventListener('change', updateMatches);
searchInput.addEventListener('keyup', updateMatches);
suggestions.addEventListener('click', changeBackground);

style.scss

$white: #F6F7EB;
$black: #393E41;
$brad: 5px;
@import url(https://fonts.googleapis.com/css?family=Francois+One);

body {
  background-color: $black;
  color: $white;
  overflow-x: hidden;
  font-size: 100%;
  font-family: 'Francois One', Helvetica, Arial, sans-serif;
}

svg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

section {
  min-width: 600px;
}

text {
  opacity: 0.7;
}

h1, h2, p {
  text-align: center;
  color: $white;
  font-size: 4em;
  line-height: 1;
  margin: 20px 0 0;
  text-shadow: 0px 5px 15px $black;
}

h2 {
  font-size: 2.5em;
}
p {
  font-size: 1.5em;
}

.search-form {
  padding-top: 5vh;
  text-align: center;
  position: relative;
}

input {
  background-color: $white;
  font-size: 15px;
  padding: 20px;
  width: 40%;
  border: 1px solid $white;
  border-radius: $brad;
}

.emoji-container {
  height: 40vh;
  overflow-y: scroll;
  background-color: $white;
  width: 50%;
  margin: 0 auto;
  border-radius: $brad;
  margin-top: 5vh;
  padding: 25px;
}

ul {
  margin: 0;
  padding: 0;
  text-align: left;
}

li {
  list-style: none;
  padding: 0 15px 5px 0;
  width: 40px;
  display: inline;
  font-size: 35px;
}

abbr {
  text-decoration: none;
  cursor: pointer;
  font-family: Times;
}

abbr[title="undefined"] {
  display: none;
}