Search Bar Options

[Ange TuteurAdministrator]

This plugin installs additional options on the search bars in your Forumotion forum. Allowing you to choose between posts, topics, and tags. There's also a link to the search page for more advanced searches.

Click to view demo

This plugin can work on any version so long as you have a search bar installed on your forum similar to phpbb3's. If your version is not phpbb3 you should see the spoiler below, otherwise just proceed with the installation as normal.

Installing a Search Bar:

Installation

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

Title : Search Options
Placement : In all the pages

Code:

$(function() {
  // language config
  var lang = {
    display_as : '<b>Display results as : </b>',
    posts : 'Posts',
    topics : 'Topics',
    tags : '<b>Hashtags : </b>',
    advanced : '<b>Advanced Search</b>',

    options_title : 'Search options'
  },

  // search options layout
  settings = $(
  '<div class="fa_search_options" style="display:none;">'+

    '<img class="fa_search_arrow" src="http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png" />'+ // arrow

    '<p>' + lang.display_as + '</p>'+

    '<p>'+
      '<input type="radio" name="show_results" value="posts"/>'+
      '<label onclick="this.previousSibling.checked = 1;">' + lang.posts + '</label>'+

      '<input type="radio" name="show_results" value="topics" checked="true"/>'+
      '<label onclick="this.previousSibling.checked = 1;">' + lang.topics + '</label>'+
    '</p>'+

    '<p>'+
      '<label onclick="this.nextSibling.checked = this.nextSibling.checked ? 0 : 1;">' + lang.tags + '</label>'+
      '<input type="checkbox" name="is_tag" value="tags"/>'+
    '</p>'+

    '<hr class="dashed"/>'+

    '<p>'+
      '<a href="/search">' + lang.advanced + '</a>'+
    '</p>'+

  '</div>'),

  // search options toggler
  cog = $('<a href="#" class="fa_search_cog" title="' + lang.options_title + '"><i class="fa fa-cog"></i></a>').click(function() {
    var settings = this.nextSibling,
        arrow = $('.fa_search_arrow', settings)[0];

    settings.style.display = /none/.test(settings.style.display) ? 'block' : 'none'; // toggle options display

    // popup position
    if (!arrow.style.right) {
      var width = this.getBoundingClientRect().width;
      arrow.style.right = width + 'px';
      settings.style.right = $(this).closest('form').find('input[type="submit"]')[0].getBoundingClientRect().width - width + 'px';
    }

    return false;
  }),

  search = $('form[action^="/search"]'), // all search forms
  i = 0, j = search.length, frag;

  // get fontawesome if unavailable
  if (!$('link[href$="font-awesome.min.css"]')[0]) {
    document.getElementsByTagName('HEAD')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" />');
  }

  for (; i < j; i++) {
    var keywords = search[i].search_keywords;

    if (keywords && search[i].name != 'searchform' && search[i].parentNode.id != 'search_menu') {
      frag = document.createDocumentFragment();
      frag.appendChild(cog.clone(true).attr('style', 'left:' + keywords.getBoundingClientRect().width + 'px;')[0]);
      frag.appendChild(settings.clone()[0]);

      search[i].className += ' fa_search_form';
      keywords.onfocus = function() {
        var settings = $(this).closest('form').find('.fa_search_options')[0];
        if (!/none/.test(settings.style.display)) settings.style.display = 'none';
      };

      search[i].appendChild(frag);
    }
  }
});

document.write('<style type="text/css">.fa_search_form{position:relative;display:inline-block;}a.fa_search_cog{color:#999;font-size:16px;position:absolute;margin-top:-8px;margin-left:-8px;top:50%}.fa_search_cog:hover{color:#69C}.fa_search_options{color:#333;font-size:12px;font-family:arial,sans-serif;text-align:center;background:#FFF;border:1px solid #DDD;border-radius:3px;box-shadow:0 3px 9px rgba(0,0,0,.175);position:absolute;top:100%;margin-top:15px;right:0;z-index:1;padding:3px;width:175px}.fa_search_options .fa_search_arrow{position:absolute;top:-10px;right:30px}.fa_search_options p{font-size:12px;margin:3px 0}.fa_search_options label{padding:0 6px 0 3px;vertical-align:middle;cursor:pointer}.fa_search_form input[type="text"] {padding-right:18px !important}</style>');

When you're finished, save the script and the plugin will be installed ! After this you'll be able to access the search options by clicking the cog in the search area.

If you'd like to make modifications to this plugin please see the next section.

Modifications

Below is a list of modifications that you can make to this plugin.


1. Lanugage
If you want to change the wording or language of this plugin, find the lang object in the script.

Code:

  var lang = {
    display_as : '<b>Display results as : </b>',
    posts : 'Posts',
    topics : 'Topics',
    tags : '<b>Hashtags : </b>',
    advanced : '<b>Advanced Search</b>',

    options_title : 'Search options'
  },

This way you can change the text to whatever you like.


2. Search Options Popup
If you want to edit the structure of the popup, find and edit the HTML of the settings variable.

Code:

  settings = $(
  '<div class="fa_search_options" style="display:none;">'+

    '<img class="fa_search_arrow" src="http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png" />'+ // arrow

    '<p>' + lang.display_as + '</p>'+

    '<p>'+
      '<input type="radio" name="show_results" value="posts"/>'+
      '<label onclick="this.previousSibling.checked = 1;">' + lang.posts + '</label>'+

      '<input type="radio" name="show_results" value="topics" checked="true"/>'+
      '<label onclick="this.previousSibling.checked = 1;">' + lang.topics + '</label>'+
    '</p>'+

    '<p>'+
      '<label onclick="this.nextSibling.checked = this.nextSibling.checked ? 0 : 1;">' + lang.tags + '</label>'+
      '<input type="checkbox" name="is_tag" value="tags"/>'+
    '</p>'+

    '<hr class="dashed"/>'+

    '<p>'+
      '<a href="/search">' + lang.advanced + '</a>'+
    '</p>'+

  '</div>'),

3. The Theme
If you want to edit the theme for the search options, find and edit the stylesheet at the bottom of the script.

Code:

document.write('<style type="text/css">.fa_search_form{position:relative;display:inline-block;}a.fa_search_cog{color:#999;font-size:16px;position:absolute;margin-top:-8px;top:50%}.fa_search_cog:hover{color:#69C}.fa_search_options{color:#333;font-size:12px;font-family:arial,sans-serif;text-align:center;background:#FFF;border:1px solid #DDD;border-radius:3px;box-shadow:0 3px 9px rgba(0,0,0,.175);position:absolute;top:100%;margin-top:15px;right:0;z-index:1;padding:3px;width:175px}.fa_search_options .fa_search_arrow{position:absolute;top:-10px;right:30px}.fa_search_options p{font-size:12px;margin:3px 0}.fa_search_options label{padding:0 6px 0 3px;vertical-align:middle;cursor:pointer}.fa_search_form input[type="text"] {padding-right:18px !important}</style>');

If you want a dark theme, replace the above stylesheet with this one :

Code:

document.write('<style type="text/css">.fa_search_form{position:relative;display:inline-block;}a.fa_search_cog{color:#333;font-size:16px;position:absolute;margin-top:-8px;top:50%}.fa_search_cog:hover{color:#CCC}.fa_search_options{color:#CCC;font-size:12px;font-family:arial,sans-serif;text-align:center;background:#111;border:1px solid #333;border-radius:3px;box-shadow:0 3px 9px rgba(0,0,0,.175);position:absolute;top:100%;margin-top:15px;right:0;z-index:1;padding:3px;width:175px}.fa_search_options .fa_search_arrow{position:absolute;top:-10px;right:30px}.fa_search_options p{font-size:12px;margin:3px 0}.fa_search_options label{padding:0 6px 0 3px;vertical-align:middle;cursor:pointer}.fa_search_form input[type="text"] {padding-right:18px !important}</style>');

and make sure to replace https://i.servimg.com/u/f18/18/21/41/30/arrow11.png in the settings variable with this URL : https://i.servimg.com/u/f86/18/45/41/65/arrow110.png so the arrow is dark as well.


These are all the modifications you can make ! If you have any questions, comments, or find a bug feel free to leave a reply below. Enjoy !

Notice

Tutorial written by Ange Tuteur. Special thanks to the Beta Testers for testing this plugin. Reproduction not permitted without consent from the author.

[omarpop23]

Thanks alot Ange Tuteur i was waiting This tutorial

[Ange TuteurAdministrator]

You're welcome !

[skouliki]

add it thanks

[schiggysboard]

Since today it looks like that:
https://i.servimg.com/u/f86/16/43/86/96/fhjnsm10.png

Any idea why, @Ange Tuteur?

[Ange TuteurAdministrator]

@schiggysboard the cog is positioned absolutely to the left at a fixed value. When you focus your input box the cog will stay at this fixed value, which is why it's displaying in that position when you increase the input's width. My recommendation is to change the position using this CSS :

Code:

a.fa_search_cog {
  left:auto !important;
  right:37px;
}

Note if you modify the size of your search button you may or may not have to modify the value "right"

[GuestGuest]

@schiggysboard the cog is positioned absolutely to the left at a fixed value. When you focus your input box the cog will stay at this fixed value, which is why it's displaying in that position when you increase the input's width. My recommendation is to change the position using this CSS :

Code:

a.fa_search_cog {
  left:auto !important;
  right:37px;
}

Note if you modify the size of your search button you may or may not have to modify the value "right"

What does that cog stand for?

[schiggysboard]

@schiggysboard the cog is positioned absolutely to the left at a fixed value. When you focus your input box the cog will stay at this fixed value, which is why it's displaying in that position when you increase the input's width. My recommendation is to change the position using this CSS :

Code:

a.fa_search_cog {
  left:auto !important;
  right:37px;
}

Note if you modify the size of your search button you may or may not have to modify the value "right"

Thank you, it's working.

[EncyNew Member]

Hi !

How can I remove the search bar please ? (hiding it with CSS being the most practical option i guess, but I don't know how....)

Thank you guys!

[Ace 1Valued Member]

CSS:

Code:

#search-box, .search-box { display: none; }

[EncyNew Member]

thanks!

[Ace 1Valued Member]

Yeah no prob just tag me in the future if you need something.

[BeyonderMember]

Nice!

[GuestGuest]

Hmm... This plug-in doesn't seem to be working right with our Edge, @Ange Tuteur. Though the icon is showing, when clicking it, it doesn't show the options ...

[Ange TuteurAdministrator]

@Samantha NL try adding the following CSS rule to your stylesheet.

Code:

#main-search { overflow:visible; }

[GuestGuest]

@Samantha NL try adding the following CSS rule to your stylesheet.

Code:

#main-search { overflow:visible; }

Thanks! Working now.

[GuestGuest]

And I've got a small tip for you regarding this code, @Ange Tuteur:





Add a line-break to that JS to avoid having 2 radio buttons sitting on that 1st line in the options


#linebreak #line-break #javascript #js #search #options


Samantha.

[Ange TuteurAdministrator]

Oh that was intentional. The design was meant to be similar to the default search popup.


The solution you provided will be useful for those who want it that way though, so thank you for sharing !

[SLGrayValued Member]

I just encountered a weird issue. When I was looking in a certain area that has a topic title Thanks Silverwren, the topic would not come up in the live search for the word thanks.

[Ange TuteurAdministrator]

@SLGray that's a problem with Forumotion. For some reason the word "Thanks" is blacklisted or something from the search keywords. Even when you search it the normal way nothing comes up, for example : http://help.forumotion.com/search?search_keywords=thanks

I'm not exactly sure why they'd want to blacklist that, because people will no doubt be searching for information on the "thanks" feature in the AP.

[Sponsored content]