Navigation : Categorized & Searchable List Boxes / The JavaScript Source

General

This script creates a list of categorized links from a data array. The list is also searchable. A great navigational aid for small spaces. Very easy to implement.

Click to view the demonsration.

Notes

Created by: Steve Chipman
Web Site: http://slayeroffice
Posted: October 8, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: catSearchBox.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Steve Chipman | http://slayerofficeLicensed under: Creative Commons License
 */

var links = new Array();
var categories = new Array();
var searchFilter = "Any";

function init() {
  initLinks();
  buildCategoryArray();
  selectHeight = categories.length + 1;
  links.sort();
  drawSelect();
  buildCategoryList();
}

function initLinks() {
  // name, links, category
  links[0] = new Array("Fark","http://www.fark.com","News");
  links[1] = new Array("Centricle","http://centricle.com","Friends");
  links[2] = new Array("Slayeroffice","http://slayeroffice.com","Friends");
  links[3] = new Array("BBspot","http://www.bbspot.com","Satire");
  links[4] = new Array("GameSpot","http://www.gamespot.com","Gaming");
  links[5] = new Array("The Onion","http://www.theonion.com","Satire");
  links[6] = new Array("Javascript-games.org","http://www.javascript-games.org","Gaming");
  links[7] = new Array("TheWebMachine","http://www.thewebmachine.com","Web Design and Development");
  links[8] = new Array("KVIII","http://www.kviii.com","Friends");
  links[9] = new Array("A List Apart","http://www.alistapart.com","Web Design and Development");
  links[10] = new Array("Red vs. Blue","http://www.redvsblue.com","Entertainment");
  links[11] = new Array("Satirewire","http://www.satirewire.com","Satire");
  links[12] = new Array("Caster's Realm","http://eq.castersrealm.com","Gaming");
  links[13] = new Array("Linux Online","http://www.linux.org/","Computers");
  links[14] = new Array("Dev Edge","http://devedge.netscape.com/","Web Design and Development");
  links[15] = new Array("Tech TV","http://www.techtv.com","Entertainment");
  links[16] = new Array("Brain Jar","http://www.brainjar.com","Web Design and Development");
  links[17] = new Array("Webmonkey","http://www.webmonkey.com","Web Design and Development");
  links[18] = new Array("W3C.org","http://www.w3c.org","Web Design and Development");
  links[19] = new Array("Builder.com","http://builder.cnet.com/","Web Design and Development");
  links[20] = new Array("Bioware","http://www.bioware.com","Gaming");
  links[21] = new Array("Adobe","http://www.adobe.com","Web Design and Development");
  links[22] = new Array("AO Basher","http://www.ao-basher.com","Gaming");
  links[23] = new Array("SWG","http://starwarsgalaxies.station.sony.com/","Gaming");
  links[24] = new Array("Brutal News","http://www.brutalnews.com","News");
  links[25] = new Array("AOLserver","http://www.aolserver.com/","Web Design and Development");
  links[26] = new Array("Apache.org","http://www.apache.org","Web Design and Development");
  links[27] = new Array("PHP.net","http://www.php.net","Web Design and Development");
  links[28] = new Array("MSDN","http://msdn.microsoft.com","Web Design and Development");
  links[29] = new Array("Java Boutique","http://javaboutique.internet.com/","Web Design and Development");
  links[30] = new Array("EQ Vault","http://eqvault.ign.com/","Gaming");
  links[31] = new Array("Google","http://www.google.com","Search Engines");
  links[32] = new Array("Alta Vista","http://www.altavista.com","Search Engines");
  links[33] = new Array("Hotbot","http://www.hotbot.com","Search Engines");
  links[34] = new Array("Ask Jeeves","http://www.ask.com","Search Engines");
  links[35] = new Array("CNN","http://www.cnn.com","News");
  links[36] = new Array("MSNBC","http://www.msnbc.com","News");
  links[37] = new Array("Washington Post","http://www.washingtonpost.com","News");
  links[38] = new Array("New York Times","http://www.nytimes.com","News");
  links[39] = new Array("AOL","http://www.aol.com","Online Services");
  links[40] = new Array("MSN","http://www.msn.com","Online Services");
  links[41] = new Array("Earthlink","http://www.earthlink.net","Online Services");
  links[42] = new Array("Compuserve","http://www.compuserve.com","Online Services");
  links[43] = new Array("MSIE","http://www.microsoft.com/windows/ie/default.asp","Browsers");
  links[44] = new Array("Mozilla","http://www.mozilla.org","Browsers");
  links[45] = new Array("Opera","http://www.opera.com","Browsers");
  links[46] = new Array("Netscape","http://www.netscape.com","Browsers");
  links[47] = new Array("Safari","http://www.apple.com/safari/download/","Browsers");
  links[48] = new Array("Konquerer","http://www.konqueror.org/","Browsers");
  links[49] = new Array("Lynx","http://lynx.browser.org/","Browsers");
}

function drawSelect() {
  mHTML = "<select name=\"lists\" class=\"sel\" size=" + selectHeight + ">";
  for(i=0;i<links.length;i++) {
    if(searchFilter == "Any") {
      mHTML+="<option title=\"test\" value=\"" + links[i][1] + "\">" + links[i][0] + "</option>";
    } else {
      if(links[i][2] == searchFilter)mHTML+="<option value=\"" + links[i][1] + "\">" + links[i][0] + "</option>";
    }
  }
  mHTML+="</select>";
  document.getElementById("mContainer").innerHTML = mHTML;
}

function narrowList(searchString) {
  resultsFound = 0;
  searchString = searchString.toLowerCase();
  mHTML = "<select size=" + selectHeight + " class=\"sel\" name=\"lists\">";
  found=false;
  partialStringMatching = document.forms[0].psm.checked;
  for(i=0;i<links.length;i++) {
    zLink = links[i][0].toLowerCase();
    if((partialStringMatching && zLink.indexOf(searchString)>-1) || (zLink.indexOf(searchString) == 0 && (links[i][2] == searchFilter || searchFilter == "Any"))) {
      found=true;
      resultsFound++;
      mHTML+="<option value=\"" + links[i][1] + "\">" + links[i][0] + "</option>";
    }
  }
  mHTML+="</select>";
  if(found)document.getElementById("mContainer").innerHTML = mHTML
  showResults(resultsFound,searchString);
}

function showResults(zResultsFound,zSearchString) {
  zHTML = "";
  zHTML += "<b>" + zResultsFound + "</b> results found";
  if(zSearchString != "") zHTML += " for search term <b>" + zSearchString + "</b>";
  zHTML += " in category <b>" + searchFilter + "</b>";
  if(zResultsFound==0) zHTML+=" so listing what was found.";
  document.getElementById("mResults").innerHTML = zHTML;
}

function buildCategoryArray() {
  for(i=0;i<links.length;i++)if(!existsInArray(categories,links[i][2])) categories[categories.length] = links[i][2];
  categories.sort();
}

function buildCategoryList() {
  zHTML = "<select size=" + selectHeight + " name=\"cats\" class=\"sel\" onClick=\"handleCategoryClick(this.value);\">";
  zHTML += "<option value=\"Any\">Any</option>";
  for(i=0;i<categories.length;i++)  zHTML+="<option value=\"" +categories[i] + "\">" + categories[i] + "</option>";
  zHTML+= "</select>";
  document.getElementById("nContainer").innerHTML = zHTML;
}

function existsInArray(arrayToCheck,valueToCheck) {
  for(z=0;z<arrayToCheck.length;z++)if(arrayToCheck[z] == valueToCheck) { return true; break; }
  return false;
}

function handleCategoryClick(sValue) {
  searchFilter = sValue;
  drawSelect();
  narrowList(document.forms[0].searchText.value);
}

function handleClear() {
  document.forms[0].searchText.value="";
  narrowList("");
}

function handleGoClick() {
  if(document.forms[0].lists.value)location.href = document.forms[0].lists.value;
}

// Multiple onload function created by: Simon Willison
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  init();
});

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#mResults {
  font-family:verdana;
  font-size:9px;
  color:#000000;
  text-align:left;
  margin-top:5px;
  background-color:#FFFFCF;
  width:400px;
  height:40px;
  border-style:solid;
  border-color:#C0C0C0;
  border-width:1px;
  padding:2px;
  clear:both;
}

.btn {
  font-family:verdana;
  font-size:9px;
  border-style:solid;
  border-width:1px;
  border-color:#000000;
  width:90px;
  margin:1px;
}

.txt {
  font-family:verdana;
  font-size:9px;
  color:#000000;
  background-color:#FFFFCF;
  width:200px;  
}

.sel {
  font-family:verdana;
  font-size:9px;
  color:#000000;
  background-color:#FFFFCF;
  width:200px;
  border-style:solid;
  border-width:1px;
  padding-left:5px;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="catSearchBox.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form>
<div style="width:410px; margin-left: 20%;">
  <input type="text" onkeyup="narrowList(this.value);" name="searchText" class="txt">
  <input type="button" value="clear" onclick="handleClear();" class="btn">
  <input type="button" value="go" onclick="handleGoClick();" class="btn">
  <div id="mContainer" style="float:left;"></div>
  <div id="nContainer" style="float:right;"></div>
  <div id="mResults">Navigate the above list of links with the aid of the catagory picker to the right and entering search terms in the text box above. Typing in text will narrow down the available selection by finding matches for what you've typed in.</div>
  <input title="Check this to return any match in a string. IE Javascript and Brain Jar for ja" type="checkbox" name="psm">Use partial string matching.
</div>
</form>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

3. From: James
10/13/2008 23:37:51

1. From: Ron
"We'll send this script to you!" Box
10/13/2008 17:09:10

2. From: Lee (Admin)
10/31/2008 15:45:31

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

3. From: James10/13/2008 23:37:51

1. From: Ron"We'll send this script to you!" Box10/13/2008 17:09:10

2. From: Lee (Admin)10/31/2008 15:45:31

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

3. From: James
10/13/2008 23:37:51

1. From: Ron
"We'll send this script to you!" Box
10/13/2008 17:09:10

2. From: Lee (Admin)
10/31/2008 15:45:31