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.

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>

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.