Emoticon Search

This plugin adds a search bar to the emoticons list to help make finding a specific emoticon easier. It's an ideal plugin to have if your forum has a large list of emoticons !

Click to view demo

Note : When looking for emoticons, the plugin searches the emoticon code and title, so make sure to use descriptive words for your emoticons to make finding them easier !

Installing

To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Emoticon Search
Placement : In all the pages
Paste the following script as the JavaScript code. (If you want support for Forumactif Messenger use this script instead.)

Code:

$(function() {
  // load handler for iframes
  function fa_emoji_search () {

    var search = $('<input/>').attr({
      placeholder : 'Search...',
      class : 'fa_emoji_search inputbox',
      name : 'emoji_search',
      type : 'text'

    }).keyup(function() {
      var emoji = $(this).closest('body').find('img'),
          val = this.value.toLowerCase(),
          i = 0,
          j = emoji.length;

      // loop through each emoji to see if any match the input
      for (; i < j; i++) {
        if (val) {

          if (emoji[i].title.toLowerCase().indexOf(val) != -1 || emoji[i].alt.toLowerCase().indexOf(val) != -1) {
            emoji[i].style.display = '';

          } else if (emoji[i].style.display != 'none') {
            emoji[i].style.display = 'none';
          }

        } else {
          emoji[i].style.display = '';
        }
      }

    })[0],

    style = $('<style type="text/css">.fa_emoji_search { width:80% !important; margin:6px 0 !important; } .smiley-element, .row1 { font-size:0; } .smiley-element img, .row1 img { margin:3px; } #sceditor_smilies #smilies_header { height:auto; } form[name="smilies_categ"] { text-align:center; }</style>')[0],

    frag = document.createDocumentFragment(),
    body = $(this).contents().find('body')[0];
 
    if (body) {
      frag.appendChild(style);
      frag.appendChild(search);
      body.querySelector('form[name="smilies_categ"]').appendChild(frag);
    }
  };
 
  // add load handlers for each iframe
  $(function() {
    var button = $('.sceditor-button-emoticon')[0];
 
    if (button) {
      button.onclick = function() {
        document.getElementById('quickEmojInternal').onload = fa_emoji_search;
        this.onclick = null;
      };
    }
 
    $('iframe[src^="/smilies"]').load(fa_emoji_search);
  });
});

If you want to change the search bar placeholder, edit the texts "Search..." here :

Code: placeholder : 'Search...',

. When you're finished, save the script and the emoticon search will be installed !


If you have any questions, comments, or have a problem with this plugin, feel free to leave a reply below. Hopefully you'll have a much easier time finding emoticons from now on !

Notice

Tutorial written by @Ange Tuteur. Reproduction not permitted without consent from the author.

This would be very helpful for forums that use a large number of smilies.

SLGray wrote:This would be very helpful for forums that use a large number of smilies.

Indeed ! I can't tell you how many times I've spent minutes searching for a specific emoticon.

that's a smart plugin
a question ..
If you have many categories the search bar searches only in the category you have selected not in all categories, right?

That doesn't work on FAM? There is no searchbar - is this intended?

skouliki wrote:that's a smart plugin
a question ..
If you have many categories the search bar searches only in the category you have selected not in all categories, right?

Correct, the plugin is programmed to search only in the active category.

Bigtuber wrote:That doesn't work on FAM? There is no searchbar - is this intended?

Yes, that's intended. The base plugin is meant for standard Forumotion forums. It wouldn't be beneficial to include extra code in the script for FAM when the administrator may not be using that plugin. If you want to enable support for it in FAM, try using this script :

Code:

$(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/';
 
  // load handler for iframes
  function fa_emoji_search () {
 
    var search = $('<input/>').attr({
      placeholder : 'Search...',
      class : 'fa_emoji_search inputbox',
      name : 'emoji_search',
      type : 'text'
 
    }).keyup(function() {
      var emoji = $(this).closest('body').find('img'),
          val = this.value.toLowerCase(),
          i = 0,
          j = emoji.length;
 
      // loop through each emoji to see if any match the input
      for (; i < j; i++) {
        if (val) {
 
          if (emoji[i].title.toLowerCase().indexOf(val) != -1 || emoji[i].alt.toLowerCase().indexOf(val) != -1) {
            emoji[i].style.display = '';
 
          } else if (emoji[i].style.display != 'none') {
            emoji[i].style.display = 'none';
          }
 
        } else {
          emoji[i].style.display = '';
        }
      }
 
    })[0],
 
    style = $('<style type="text/css">.fa_emoji_search { width:80% !important; margin:6px 0 !important; } .smiley-element, .row1 { font-size:0; } #simple-wrap a { margin:0 !important; } .smiley-element img, .row1 img, #simple-wrap img { margin:3px !important; } #sceditor_smilies #smilies_header { height:auto; } form[name="smilies_categ"] { text-align:center; }</style>')[0],
 
    frag = document.createDocumentFragment(),
    body = $(this).contents().find('body')[0];
 
    if (body) {
      frag.appendChild(style);
      frag.appendChild(search);
      body.querySelector('#smilies_categ, form[name="smilies_categ"]').appendChild(frag);
    }
  };
 
  // add load handlers for each iframe
  $(function() {
    var button = $('.sceditor-button-emoticon')[0];
 
    if (button) {
      button.onclick = function() {
        document.getElementById('quickEmojInternal').onload = fa_emoji_search;
        this.onclick = null;
      };
    }
 
    $('iframe[src^="/smilies"]').load(fa_emoji_search);

    if (window.FAM) {
      $(document).on('click', function (ev) {
        var that = ev.target;

        if (that.parentNode.id == 'FAM-emoji') {
          that = that.parentNode
        }

        if (that.id == 'FAM-emoji' && !that.dataset.emojiHandlerSet) {
          document.getElementById('FAM-emoji-list').addEventListener('load', fa_emoji_search);
          that.dataset.emojiHandlerSet = true;
        }
      });
    }
  });
});

thanks!