Lightweight Emoji Picker with Search – Faceclick

Faceclick is a lightweight emoji picker library that adds an emoji selection functionality to text fields through a searchable, categorized pop-up interface.

The library provides keyword search capabilities using Unicode specification tags and organizes emojis into browsable groups for easy navigation.

Features:

• Keyword Search: Search emojis using Unicode specification tags for accurate results.
• Group Browsing: Navigate emojis by categories including People, Natural, Activity, and Things.
• Tiny Footprint: Single vanilla JavaScript file with minimal CSS and no external dependencies.
• Cursor Position Insertion: Inserts selected emojis at the current cursor position in text fields.
• Click-Away Closing: Automatically closes the picker when clicking outside the popup.
• Configurable Behavior: Control search clearing, group filtering, and auto-close behavior through global settings.

How to use it:

1. Add Faceclick’s JavaScript and CSS files to the webpage.

<script src="faceclick.js"></script>
<link rel="stylesheet" href="faceclick.css">

2. Attach the emoji picker to the text field you specify.

<textarea id="example"></textarea>
<button id="trigger">Toggle the emoji picker</button>

var button = document.getElementById('trigger');
var textarea = document.getElementById('example');
FC.attach(button, textarea);

3. For more control over emoji selection, use attach_cb() to define custom behavior when users pick an emoji:

FC.attach_cb(button, function(emoji) {
  FC.close();
  // Custom handling - append to div, send to API, etc.
  document.getElementById('output').textContent += emoji;
});

4. You can change the default settings after the library has loaded to control the picker’s behavior.

• FC.group_clears_search: When true (default), the search box is cleared when a user clicks a group tab.
• FC.search_clears_group: When true (default), the group tab selection is cleared when a user types in the search box.
• FC.close_on_clickaway: When true (default), the popup closes if the user clicks anywhere outside of it.
• FC.close_on_pick: When true (default), the popup closes after an emoji is selected, and focus returns to the text input.

5. More API methods.

• FC.attach_popup(element, callback): A lower-level function that opens the popup next to a given element and calls your callback upon selection.
• FC.popup(x, y, callback): The lowest-level method. It opens the picker at specific screen coordinates (x, y) and executes the callback with the selected emoji.
• FC.insert(element, insert_txt): A utility method that inserts text into a text input at the current cursor position. FC.attach() uses this internally.
• FC.close(): Manually closes the emoji picker popup.

FAQs:

Q: How do I customize the popup positioning?
A: Use FC.popup(x, y, callback) for full control over coordinates. The attach_popup() method positions the picker to the right of the target element by default using getBoundingClientRect().right + 5 for x and .top for y. You can calculate your own coordinates based on element dimensions and pass them to popup() directly.

Q: Does Faceclick work with contenteditable divs?
A: The FC.insert() method specifically uses setRangeText(), which only works on input and textarea elements. For contenteditable divs, use attach_cb() with a custom callback that manipulates the Selection API. You’ll need to get the current range, create a text node with the emoji, and insert it at the cursor position manually.

Q: How do I style the picker to match my site’s design?
A: The CSS file uses simple class and ID selectors (#fc_popup, #fc_filters, #fc_list_scrollbox). Override these in your own stylesheet to change colors, borders, shadows, and dimensions. The popup uses absolute positioning, so you can adjust z-index if it conflicts with other elements.

Q: Does the search support fuzzy matching or typos?
A: Search uses simple substring matching with indexOf(). The search text must appear exactly within the emoji’s tags or label. This keeps the code minimal but means typos won’t return results. The Unicode tags are comprehensive enough that most reasonable keywords will match something, but exact spelling matters.

Related Resources:

• 10 Best Emoji Pickers In JavaScript

The post Lightweight Emoji Picker with Search – Faceclick appeared first on CSS Script.