Search Box

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.

Looks like an awesome idea!! I think im going to use this code on my site since we are a multigame guild after all. I just need to create some sort of universal artwork to display above it

Can you make me a dummy 200px blank image to put above it that way i know where to put it in the code? Along with the search box being 200px center aligned.

:D

Edit: After putting it in my site and playing around with it some if come across a couple bugs. The mouse over doesnt display on the search button, if i add WAR websites the icons arn't feeding and showing up. I want to make the box 200px wide but if i change the search field to that wide or 130px it pushes the search icon onto the next line even though it hasnt filled up the content box.

http://www.guildportal.com/Guild.aspx?GuildID=241533&TabID=2106231 

LOL ok Avandius... I see the problem, somehow all the "//" were erased from the URLs.... I just added them back, but you can easily edit your script by adding them back

it was "http:i201...", just add the double slashes back to "http://i201...."

The search URL was also effected the same way.. sorry about that!!

I'll look into fixing the width problem after we raid tonight.

Hey Avandius,

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.

Hey Mottie you are the best....wish i was this guru like.