Categorized & Searchable List Boxes

Steve Chipman Oct 8, 2008

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://www.javascriptsource.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>

Leave a Response

(5 comments)

John,[br /][br /]Due to the complexity of the script, you will need to post your question over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Dec 2, 2008

It works now. Thanks!

Lee Oct 31, 2008

Great script, I've been looking for something exactly like this for a long time! Thanks a lot!

James Oct 13, 2008

Getting "ERROR: Script categorized-searchable-list-boxes.html is missing at /www2/jss/cgi-bin/scriptbot2.cgi line 53." when trying to get script emailed to me.[br /][br /]Ron

Ron Oct 13, 2008

How can this script be modified to open the reference link in a new web page, such as with the argument target="_blank"? I cannot see how to do it from the javascript, nor can I seem to modify the function call from the body of the calling page. Is there a way to do this?[br /][br /]I am trying to preserve the page which is linking, rather than be forced to do a 'back' to get to this page. I use both Firefox and Chrome, but multiple browsers permit having several active tags; I'd like to use this functionality.

John B. Moss Oct 12, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details