Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Custom Widgets > Search Box
Mottie (SuperAdmin) 10/18/2008 5:11 PM EST : Search Box
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Search Box

GuildPortal admin site link to original post

This script adds a search box to your site that basically allows you to search any site you desire. Add or subtract sites from the list any time you want! See this search box in action on my test-site. Click on the icon to open the list of available sites to search. Then click on the magnifying glass to search that site!

 Search Box
Search Box (showing list)

The Code

<style type="text/css">
#searchbox img { cursor: pointer; position: relative; top: 4px; }
#searchbox input { color: #ffffff; background: #222222; border: #222222 1px solid; width: 90px;}
#searchbox button { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/search.png) no-repeat; position: relative; top: 13px; left: -5px; width: 37px; height: 35px; border: none; cursor: pointer; }
#searchbox button:hover { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/search-hover.png) no-repeat; }
#popitmenu { background: #222222; border: #222222 1px solid; position: absolute; line-height: 18px; z-index: 100; visibility: hidden; }
#popitmenu a{ text-decoration: none; padding-left: 6px; color: #ffffff; display: block; }
#popitmenu a:hover{ background-color: #444444; }
#popitmenu img { border:0px; padding-right:10px; }
html>body #searchbox button {top:0px;}
</style>
<script type="text/javascript">
var sites = new Array();
var searchNewWindow = true;
var searchDefault = "WowHead";
var defaultMenuWidth = "120px";

sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://wow.allakhazam.com/search.html?q="]);
sites.push (["Armory","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowarmory.png","http://www.wowarmory.com/search.xml?searchType=all&searchQuery="]);
sites.push (["Google","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/google.png","http://www.google.com/search?q="]);
sites.push (["Thottbot","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/thottbot.png","http://thottbot.com/?s="]);
sites.push (["WowDB","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowdb.png","http://www.wowdb.com/search.aspx?search_text="]);
sites.push (["WowHead","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowhead.png","http://www.wowhead.com/?search="]);
sites.push (["WowWiki","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowwiki.png","http://www.wowwiki.com/index.php?search="]);

/*
******************************
Don't Change anything below
****************************** */
</script>
<div id="popitmenu" ="clearhidemenu();" ="dynamichide(event)"></div>
<div align="center"><div id="searchbox">
<input id="search-input" type="text" maxlength="256" name="search" onKeyPress="return disableEnterKey(event)" />
<span ="showmenu(event,linkset[0])" ="delayhidemenu()"><img id="search-image" src=""></span>
<button id="searchbx" />
</div></div>
<script src="http://www.axiomfiles.com/Files/243007/searchbox.js" type="text/javascript"></script>

Customizing

CSS

  • Change the numbers in blue to match the colors of your site. I made the background and border the same color because it looks nicer that way 

  • The width of the search box is optimized for the default side column width of 175 pixels. If you made the columns wider and want to make your input box wider, then modify the number in red.

    width: 90px;

  • If you want to replace the magnifying glass search button, replace the icon's URL in orange with the URL to your image... make sure you make a "hover" version and adjust the image height and width definitions as well.

Search Sites

  • The above script is set up for a World of Warcraft search box, but you can modify it to work for any game site, or to search any database. Follow the steps below to modify this code.

  • To make the search box open the search results in a new window, set this variable (in teal) to "true"

    var searchNewWindow = true;

  • You can set a default search engine by typing in the name of the site (in green) - this must match the name (case sensitive) you put into the "sites" variable. In the example below, I chose the default search site to be "WowHead".

    var searchDefault = "WowHead";

  • You can adjust the width of the pop-up selection menu by adjusting the "defaultMenuWidth" (in red)

    var defaultMenuWidth = "120px";

  • How to add a search site - You will need three things to make this work... here is the variable:

    sites.push (["WowHead","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowhead.png","http://www.wowhead.com/?search="]);

    1. The Site Name is the first part of the variable (in green). This is the name that must match (case sensitive) the "searchDefault" variable if you want this site to be set as default. It is ok to include spaces.

    2. The second part of the sites varible is the URL of the icon for the site (in orange). All the icons in this post were custom made and are 18 x 18 pixels in size.

    3. The last part of this variable is in purple. It is the URL to the actual search page. The best way to find this page URL is use the search box on the site itself. Choose something very general to search for, such as "cloak". Most of the time it will return a list of items that match "cloak"... now look at the browser's URL and you'll most likely see something like "http://www.wowhead.com/?search=cloak". Copy this URL and add it to the third part of the "sites" variable, don't forget to remove the "cloak" from the URL. This works for just about any site with a search box. In fact, I've included a list of other sites that you can choose from below!

  • Other search sites you can add to your search box!!... just add or replace the "sites" variables in the script above to customize this box for your specific game. If I haven't included a site that is commonly used for your game, please feel free to reply with your "sites" variable and I'll update this thread!

    AoC Armory
    sites.push (["Armory","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Conan.png","http://www.conanarmory.com/search.aspx?search_text="]);

    DAoC
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://camelot.allakhazam.com/searchdb.html?a=Search&terms="]);

    EQ
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://everquest.allakhazam.com/search.html?q="]);
    sites.push (["EQ Wiki","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EQwiki.png","http://www.eqwiki.net/wiki/Special:Search?search="]);

    EQ2
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://eq2.allakhazam.com/search.html?q="]);
    sites.push (["EQ2i","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EQ2i.png","http://eq2.wikia.com/wiki/Special:Search?search="]);

    EQOA
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://eqoa.allakhazam.com/itemname.html?iname="]);

    EVE ONLINE
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://eve.allakhazam.com/db/itemlookup.html?itemname="]);
    sites.push (["EVEwiki","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EveWiki.png","http://www.eve-wiki.net/index.php?search="]);

    FFXI
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://ffxi.allakhazam.com/search.html?q="]);
    sites.push (["FFXIclopedia","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/FFXIWiki.png","http://wiki.ffxiclopedia.org/wiki/Special:Search?search="]);

    LINEAGE II
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://l2.allakhazam.com/db/itemlookup.html?iname="]);
    sites.push (["Stratics","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/L2stratics.png","http://lineage2.stratics.com/l2wiki/index.php/Special:Search?search="]);

    LOTRO
    sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://lotro.allakhazam.com/search.html?q="]);
    sites.push (["LOTRO Wiki","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/LOTROWiki.png","http://lotro-wiki.com/index.php/Special:Search?search="]);

    WARHAMMER
    sites.push (["WarDB","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/WarDB.png","http://www.wardb.com/search.aspx?search_text="]);
    sites.push (["War Wiki","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/WarWiki.png","http://www.thewarwiki.com/wiki/Special:Search?search="]);
Edit (10/20/2008): Replaced the select box with a pop-out menu to make it look better on non-Firefox browsers.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 10/23/2008 4:50 AM EST : Search Box v1.1
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Search Box version 1.1

Ok, I added & fixed a few things:
  • It no longer jumps to the top of the page when switching search sites
  • I removed all the extra space around the magnifying glass icon and made it smaller to match the icon size... and of course updated the CSS to make it look better
  • I added a banner image over the search box (URL in orange) - it's below the "Don't change anything below" but hey LOL.
  • I removed the <button> tag as it also made the page reload and replaced it with an image.
  • I added a new variable that adds a horizontal line into the tooltip, tell the script where to add the lines using this variable:

    var tooltipSeparator = "1|2";

    The number indicates to add a horizontal line after that element. Each number is separated with a line "|" (shift-\). So in the example above "1" corresponds to "Google" and "2" to the "Armory", both of which have a horizontal line.
Here is what it looks like now (200 pixels wide)

 Search Box with Banner
 Search Box tooltips (with horizontal separators)

Here is the updated code:
<style type="text/css">
#searchbox img { cursor: pointer; border: none; position: relative; top: 5px; }
#searchbox input { color: #ffffff; background: #222222; border: #222222 1px solid; width: 150px; font-size: 10pt;}
#searchbx { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/search2.png) no-repeat; width: 18px; height: 18px; }
#searchbx:hover { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/search2-hover.png) no-repeat; }
#popitmenu { background: #222222; border: #222222 1px solid; position: absolute; line-height: 18px; z-index: 100; visibility: hidden; }
#popitmenu a{ text-decoration: none; padding-left: 6px; color: #ffffff; display: block; }
#popitmenu a:hover{ background-color: #444444; }
#popitmenu img { border: 0px; padding-right:10px; }
</style>
<script type="text/javascript">
var sites = new Array();
var searchNewWindow = true;
var searchDefault = "WowHead";
var defaultMenuWidth = "120px";
var tooltipSeparator = "1|2";

sites.push (["Google","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/google.png","http://www.google.com/search?q="]);
sites.push (["Armory","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowarmory.png","http://www.wowarmory.com/search.xml?searchType=all&searchQuery="]);
sites.push (["Allakhazam","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/allakhazam.png","http://wow.allakhazam.com/search.html?q="]);
sites.push (["Thottbot","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/thottbot.png","http://thottbot.com/?s="]);
sites.push (["WowDB","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowdb.png","http://www.wowdb.com/search.aspx?search_text="]);
sites.push (["WowHead","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowhead.png","http://www.wowhead.com/?search="]);
sites.push (["WowWiki","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowwiki.png","http://www.wowwiki.com/index.php?search="]);

/*
******************************
Don't Change anything below
****************************** */
</script>
<div id="popitmenu" ="clearhidemenu();" ="dynamichide(event)"></div>
<div align="center">
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/searchweb.gif">
<div id="searchbox">
<input id="search-input" type="text" maxlength="256" name="search" onKeyPress="return disableEnterKey(event)" />
<img id="search-image" src="" ="showmenu(event,linkset[0])" ="delayhidemenu()">
<img id="searchbx" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/blank.gif"/>
</div></div>
<script src="http://www.axiomfiles.com/Files/243007/searchbox.js" type="text/javascript"></script>

Please follow the instruction in the top post on how to customize this further.

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 3/12/2009 9:45 PM EST : Search Box v1.1 - for the banner area
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

If you would like to place this search box into your banner area, the popup window seems to act up and shows up almost off the screen. After some tweaking, the solution below may fix this problem, but it hasn't been throughly tested yet.

Basically, replace the code below the "Don't change anything below" with this code (the new stuff is in blue) - this code positions the search box on the right side of the page.
/*
******************************
Don't Change anything below
****************************** */
</script>
<div id="popitmenu" ="clearhidemenu();" ="dynamichide(event)"></div>
<br><br><br><br>
<table><tr><td width="90%">&nbsp;</td><td>

<img src="http://i194.photobucket.com/albums/z13/gythawen/Testament/search-1.png">
<div id="searchbox">
<input id="search-input" type="text" maxlength="256" name="search" onKeyPress="return disableEnterKey(event)" />
<img id="search-image" src="" ="showmenu(event,linkset[0])" ="delayhidemenu()">
<img id="searchbx" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/blank.gif"/>
</div>
</td></tr></table>
<script src="http://www.axiomfiles.com/Files/243007/searchbox2.js" type=text/javascript></script>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

xcaca (Applicant) 5/1/2012 9:25 PM EST : RE: Search Box v1.1 - for the banner area

xcaca
Posts: 6

0
Like

0
Dislike

Hi Mottie ! 

I have a problem.

I don't know where I can put the code to have the search box.

I try in " Boxes, Right Side" but the search box go on my widgets,so, there are 3 search box and it's not clear.

I don't subscribe to GuildPortal so don't have the banner area.

I want to have the search box in the right in a separate widget.

I hope you can help me !

Thanks a lot  
TopBottom

Mottie (SuperAdmin) 5/2/2012 11:59 AM EST : RE: Search Box v1.1 - for the banner area
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi xcaca!

Could you install it using the instruction from this post, and when you are done and have problems, hollar at me. It's easier for me to look at what might need to be fix than to guess at what problems you are having.

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

xcaca (Applicant) 5/2/2012 5:29 PM EST : RE: Search Box v1.1 - for the banner area

xcaca
Posts: 6

0
Like

0
Dislike

Hello Mottie.

Thank for you repost.


I just add in the site : http://blank.clangroups.com

I don't know where i can put  $block[title]  and  $block[content] 

I hope you can help me. Thanks a lot !

The code is : 
$block[title]
<style type="text/css">
#searchbox img { cursor: pointer; border: none; position: relative; top: 5px; }
#searchbox input { color: #ffffff; background: #222222; border: #222222 1px solid; width: 150px; font-size: 10pt;}
#searchbx { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/search2.png) no-repeat; width: 18px; height: 18px; }
#popitmenu { background: #222222; border: #222222 1px solid; position: absolute; line-height: 18px; z-index: 100; visibility: hidden; }
#popitmenu a{ text-decoration: none; padding-left: 6px; color: #ffffff; display: block; }
#popitmenu a:hover{ background-color: #444444; }
#popitmenu img { border: 0px; padding-right:10px; }
</style>
$block[content]
<script type="text/javascript">
var sites = new Array();
var searchNewWindow = true;
var searchDefault = "WowHead";
var defaultMenuWidth = "120px";
var tooltipSeparator = "1|2";
 
 
/*
******************************
Don't Change anything below
****************************** */
</script>
<div id="popitmenu" ="clearhidemenu();" ="dynamichide(event)"></div>
<div align="center">
<div id="searchbox">
<input id="search-input" type="text" maxlength="256" name="search" onKeyPress="return disableEnterKey(event)" />
<img id="search-image" src="" ="showmenu(event,linkset[0])" ="delayhidemenu()">
</div></div>
<script src="http://www.axiomfiles.com/Files/243007/searchbox.js" type="text/javascript"></script>
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%