Emoji Ajax Type Ahead

Developer
Tobi Weinstock
Size
4,619 Kb
Views
22,264
  1. Emoji Ajax Type Ahead Previews
  2. Emoji Ajax Type Ahead HTML Codes
  3. Emoji Ajax Type Ahead CSS Codes
  4. Emoji Ajax Type Ahead JS Codes

How do I make an 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!. What is a emoji ajax type ahead? How do you make a emoji ajax type ahead? This script and codes were developed by Tobi Weinstock on 19 December 2022, Monday.

Emoji Ajax Type Ahead Previews
IQ Test

Emoji Ajax Type Ahead - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Emoji Ajax Type Ahead</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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">

Emoji Ajax Type Ahead - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Francois+One);
body { background-color: #393E41; color: #F6F7EB; 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: #F6F7EB; font-size: 4em; line-height: 1; margin: 20px 0 0; text-shadow: 0px 5px 15px #393E41;
}
h2 { font-size: 2.5em;
}
p { font-size: 1.5em;
}
.search-form { padding-top: 5vh; text-align: center; position: relative;
}
input { background-color: #F6F7EB; font-size: 15px; padding: 20px; width: 40%; border: 1px solid #F6F7EB; border-radius: 5px;
}
.emoji-container { height: 40vh; overflow-y: scroll; background-color: #F6F7EB; width: 50%; margin: 0 auto; border-radius: 5px; 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;
}

Emoji Ajax Type Ahead - Script Codes JS Codes

'use strict';
var endpoint = 'https://raw.githubusercontent.com/github/gemoji/master/db/emoji.json';
var emojis = [];
var searchInput = document.querySelector('.search');
var suggestions = document.querySelector('.suggestions');
var emojiPattern = Array.from(document.querySelectorAll('.emoji-pattern'));
fetch(endpoint).then(function (blob) { return blob.json();
}).then(function (data) { return emojis.push.apply(emojis, data);
}).then(setTimeout(function () { renderMatches(emojis);
}, 100)).catch(function (err) { console.log(err);
});
function findMatches(wordToMatch, emojis) { return emojis.filter(function (emoji) { return emoji.aliases.some(function (alias) { return alias.indexOf(wordToMatch) !== -1; }); });
}
function renderMatches(arr) { var html = arr.map(function (emo) { var emoji = emo.emoji; var description = emo.description; return '\n <li class="icon">\n <abbr title="' + description + '">' + emoji + '</abbr>\n </li>\n '; }).join(''); suggestions.innerHTML = html;
}
function updateMatches() { var matchArray = findMatches(this.value, emojis); renderMatches(matchArray);
}
function changeBackground(e) { if (!e.target.matches('abbr')) return; var emoj = e.target.innerText; emojiPattern.map(function (pattern) { return pattern.textContent = emoj; });
}
searchInput.addEventListener('change', updateMatches);
searchInput.addEventListener('keyup', updateMatches);
suggestions.addEventListener('click', changeBackground);
Emoji Ajax Type Ahead - Script Codes
Emoji Ajax Type Ahead - Script Codes
Home Page Home
Developer Tobi Weinstock
Username tvweinstock
Uploaded December 19, 2022
Rating 4.5
Size 4,619 Kb
Views 22,264
Do you need developer help for Emoji Ajax Type Ahead?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tobi Weinstock (tvweinstock) Script Codes
Name
Paparazzi Drone
React Tabs
Love for Paris
Liz Lemon Valentine
Google Maps Practice Pen
French Words
V Day Countdown
Halloween Tooltips
Keep Ya Head Up
A Pen by Tobi Weinstock
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!