FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

Who is online?
In total there are 17 users online :: 0 Registered, 0 Hidden and 17 Guests

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

Search Bar Options

View previous topic View next topic Go down

Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Mon 18 Apr 2016, 08:18

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.

Search Bar Options Captur32

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. Wink


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 ! cheers


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


Last edited by Ange Tuteur on Tue 19 Apr 2016, 17:50; edited 1 time in total
omarpop23
omarpop23

Gender : Male
Age : 29
Posts : 140
Points : 3217
Reputation : 25
Location : Egypt
Language : Arabic , English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
https://www.facebook.com/omarpop23

Postomarpop23 Mon 18 Apr 2016, 08:27

Thanks alot Ange Tuteur i was waiting This tutorial Thumb left
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Mon 18 Apr 2016, 08:37

You're welcome ! Wink
skouliki
skouliki

Gender : Female
Posts : 376
Points : 3669
Reputation : 173
Language : english,greek
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
http://iconskouliki.forumgreek.com https://www.facebook.com/iconskouliki https://twitter.com/iconskouliki

Postskouliki Mon 18 Apr 2016, 11:53

add it thanks Like a Star @ heaven
schiggysboard
schiggysboard

Gender : Male
Posts : 79
Points : 3686
Reputation : 20
Language : German, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
http://www.schiggysboard.com/

Postschiggysboard Sun 22 May 2016, 11:11

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

Any idea why, @Ange Tuteur?
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Sun 22 May 2016, 13:11

@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"
Anonymous
Guest
Guest

PostGuest Sun 22 May 2016, 13:31

Ange Tuteur wrote:@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?


Last edited by Samantha on Sun 22 May 2016, 18:36; edited 1 time in total
schiggysboard
schiggysboard

Gender : Male
Posts : 79
Points : 3686
Reputation : 20
Language : German, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
http://www.schiggysboard.com/

Postschiggysboard Sun 22 May 2016, 13:55

Ange Tuteur wrote:@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. Smile
Ency
Ency
New Member
Gender : Unspecified
Posts : 7
Points : 2705
Reputation : 0
Language : English, French
Browser : Browser : Safari Forum Version : Forum Version : phpBB3

PostEncy Mon 31 Oct 2016, 11:47

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 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5280
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Mon 31 Oct 2016, 11:59

CSS:

Code:
#search-box, .search-box { display: none; }
Ency
Ency
New Member
Gender : Unspecified
Posts : 7
Points : 2705
Reputation : 0
Language : English, French
Browser : Browser : Safari Forum Version : Forum Version : phpBB3

PostEncy Mon 31 Oct 2016, 12:12

thanks!
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5280
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Mon 31 Oct 2016, 12:54

Yeah no prob just tag me in the future if you need something.
Beyonder
Beyonder
Member
Gender : Male
Age : 27
Posts : 18
Points : 3651
Reputation : 6
Location : Beyond Realm
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
http://narutorpguniverse.forumotion.com

PostBeyonder Wed 02 Nov 2016, 23:51

Nice! Very Happy
Anonymous
Guest
Guest

PostGuest Fri 02 Dec 2016, 14:56

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 ...

Search Bar Options 8ead4485fead49b3bb7b6aaed4291db8

Search Bar Options B98a132ab9c6485f8c1e9907f9337c1d
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Mon 05 Dec 2016, 11:23

@Samantha NL try adding the following CSS rule to your stylesheet.
Code:
#main-search { overflow:visible; }
Anonymous
Guest
Guest

PostGuest Tue 06 Dec 2016, 02:12

Ange Tuteur wrote:@Samantha NL try adding the following CSS rule to your stylesheet.
Code:
#main-search { overflow:visible; }

Thanks! Working now. Smile
Anonymous
Guest
Guest

PostGuest Fri 09 Dec 2016, 11:38

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


Search Bar Options 7bf87c5721014fc99e17e3dfdb26d449


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


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


Hello Samantha.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Mon 12 Dec 2016, 11:38

Oh that was intentional. The design was meant to be similar to the default search popup.
Search Bar Options Captur23

The solution you provided will be useful for those who want it that way though, so thank you for sharing !
SLGray
SLGray
Valued Member
Gender : Male
Age : 51
Posts : 2465
Points : 7097
Reputation : 290
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray Sat 17 Dec 2016, 00:37

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 Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Mon 19 Dec 2016, 10:52

@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

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum