Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Emoji Ajax Type Ahead

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.

<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>
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);
$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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.