Emoji is a visual representation of emotions, objects, or symbols. They're widely used in digital communication and have become an integral part of online conversations. Their importance lies in their ability to convey emotions and add context to text-based messages. With the rise of social media and messaging apps, emoji have become even more popular as they allow users to express themselves in a fun and engaging way.

Businesses have also started incorporating emoji into their marketing campaigns as a way to connect with younger audiences who are more likely to engage with visual content. Overall, emoji has become a crucial element of modern communication, and its importance in the web is undeniable.

In this post, we'll show you how to quickly insert an emoji into your text area by implementing a functionality that suggests emojis for users to choose from.

Updated data structure for emoji suggestions

In our previous post, we introduced a technique to suggest words based on the current word being typed. Now, we're taking it up a notch by using the same technique to suggest emojis when users type the ":" character. We'll be using a modified data model, but the approach is the same.

Instead of a list of keywords, our suggestions will now be a list of objects with two properties: symbol and name.

The symbol property represents the actual emoji, while the name property will be used to look up the corresponding emoji based on the keyword users typed.

Here's a sample code to illustrate the updated data structure:

const suggestions = [
    { symbol: "😀", name: "Grinning Face" },
    { symbol: "😃", name: "Smiling Face with Open Mouth" },
    { symbol: "😄", name: "Smiling Face with Open Mouth and Smiling Eyes" },
    { symbol: "😁", name: "Grinning Face with Smiling Eyes" },
    {
    symbol: "😆",
    name: "Smiling Face with Open Mouth and Tightly-Closed Eyes",
    },
    { symbol: "😅", name: "Smiling Face with Open Mouth and Cold Sweat" },
    { symbol: "🤣", name: "Rolling On The Floor Laughing" },
    { symbol: "😂", name: "Face with Tears of Joy" },
    { symbol: "🙂", name: "Slightly Smiling Face" },
    { symbol: "🙃", name: "Upside-Down Face" },
    ...
];

Finding emojis

To adapt our approach to a new data structure, we need to make some changes to the input event handler.

First, we check if the word being typed is not empty and starts with a : character.

const currentWord = currentValue
    .substring(startIndex + 1, cursorPos)
    .toLowerCase();
if (currentWord === '' || !currentWord.startsWith(':')) {
    return;
}

Next, we extract the keyword by removing the first : character.

const searchFor = currentWord.slice(1);

Finally, we search for emojis with names similar to the keyword using the following sample code:

const matches = suggestions
    .filter((suggestion) => suggestion.name.toLowerCase().indexOf(searchFor) > -1)
    .slice(0, 10);

Adding emojis to your text

In the previous post, clicking each suggestion item would insert the whole word into the editor. However, in this example, we will only insert the emoji symbol. To do this, we need to adjust the click event handler as follows:

const option = document.createElement('div');
option.innerHTML = `${match.symbol} ${match.name}`;
option.setAttribute('data-symbol', match.symbol);
option.classList.add('container__suggestion');

option.addEventListener('click', function () {
    replaceCurrentWord(this.getAttribute('data-symbol'));
    suggestionsEle.style.display = 'none';
});

In this example, we have added a simple data-symbol attribute to each suggestion item, which sets the corresponding emoji using the setAttribute function. When users click on a suggestion, this attribute is retrieved using the getAttribute function, and the current word is replaced with the corresponding emoji.

Check out the final demo below to see how it works. Simply type the : character to see suggested emojis and start using them right away!

It's highly recommended that you visit the original post to play with the interactive demos.

If you found this series helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

If you want more helpful content like this, feel free to follow me:

• Twitter
• GitHub