Lookup Lists: Initializing the List - Doc JavaScript | WebReference

Lookup Lists: Initializing the List - Doc JavaScript

Initializing the List

We'll use JavaScript to create our lookup list. If the browser is JavaScript-enabled, but does not support the features necessary for a lookup list, the script creates a simple list, also known as a pop-up menu. The start() function initializes the lookup list:

function start() {
  if (!window.Array) return;
  ar = new Array(); // define an array of sites
  // initialize the array
  ar[0] = new site("2ask Best of the Planet Awards",
  ar[1] = new site("Ampersand",
  ar[2] = new site("ASource",
  ar[3] = new site("Benny Blue Web Wow Awards",
  ar[4] = new site("Cool Banana! Site of the Day",
  ar[5] = new site("Cool Site of the Day",
  ar[6] = new site("Cosmic Site of the Night",
  ar[7] = new site("Cybersmith Site of the Day",
  ar[8] = new site("Dr. Webster Cool Web Site of the Day",
  ar[9] = new site("Dynamite Site of the Nite",
  ar[10] = new site("Egotistical Site of the Week",
  ar[11] = new site("Fred Langa's HotSpots (Windows Magazine)",
  ar[12] = new site("Funky Site of the Day",
  ar[13] = new site("Ground Zero",
  ar[14] = new site("High Five",
  ar[15] = new site("Hot Rot Your Head",
  ar[16] = new site("iWorld Site of the Day",
  ar[17] = new site("Jayde Online",
  ar[18] = new site("Marketing Excellence",
  ar[19] = new site("NetGuide (Site of the Day or Top 100)",
  ar[20] = new site("Netscape Guide by Yahoo!",
  ar[21] = new site("Netscream's UV Award",
  ar[22] = new site("Netsurfer Digest",
  ar[23] = new site("New Zealand Net Awards",
  ar[24] = new site("PC Magazine",
  ar[25] = new site("Seven Wonders",
  ar[26] = new site("The Internet RoadKill Award",
  ar[27] = new site("The Web 100",
  ar[28] = new site("Too Cool",
  ar[29] = new site("USA TODAY Hot Sites",
  ar[30] = new site("Wave of the Day",
  ar[31] = new site("WebScout",
  ar[32] = new site("Wow! Web Wonders!",
  ar[33] = new site("Yahoo!'s Picks of the Week",
  ar[34] = new site("YPN Directory (and the Top 100)",
  if (ar.sort) ar.sort(byName);
  if (NS4) document.captureEvents(Event.KEYUP);
  document.onkeyup = checkKey;

The first statement terminates the function if the browser does not support the Array object. The Array object is specified as a property of the window object in order to avoid an error if the Array object is not supported. See Column 6 for an in depth look at this technique.

The function's second statement defines an instance of the Array object. Notice that the new array, ar, is global due to the absence of the preceding var keyword.

The next segment of the function initializes the array with instances of our site object. Here's the code for the site() constructor:

function site(name, url) {
  this.name = name;
  this.url = url;

The site() function constructs an object with two properties, name and url. Its first parameter is assigned to the name property, while the second one is assigned to url. Let's take a look at how the start() function sets the first element of the array:

ar[0] = new site("2ask Best of the Planet Awards",

This array element reflects a specific site in our lookup list. ar[0].name holds the name of the site ("2ask Best of the Planet Awards") whereas ar[0].url stores its URL ("").

Arrays in Navigator 4.0x and Internet Explorer 4.0x feature the sort() method, which sorts the elements of a given array. Its general syntax is:


compareFunction specifies a user-defined function that determines the sort order. If omitted, the elements are sorted in a lexicographic ("dictionary" or "telephone book," not numerical) order, according to the string conversion value of the array elements. For example, if two elements in an array are 9 and 80, 80 is sorted to a lower index than 9 because the string "80" comes before the string "9" in lexicographic order.

If compareFunction is supplied, the array elements are sorted according to the return value of the compare function. If a and b are two elements being compared, then:

A compare function should have the following structure:

function compareFunction(a, b) {
  if (a is less than b according to the sorting order)
    return -1;
  if (a is greater than b according to the sorting order)
    return 1;
  return 0;

In our script, byName() serves as the compare function:

function byName(a, b) {
  var anew = a.name.toLowerCase();
  var bnew = b.name.toLowerCase();
  if (anew  bnew) return 1;
  return 0;

Since ar is an array of objects, we are actually sorting objects, not strings. These objects are sorted according to their name property (a.name and b.name). While the default sorting method is case-sensitive, the byName() function ensures a case-insensitive sorting pattern. Therefore, the name property of the function's arguments is converted to an all-lowercase string via the toLowerCase() method.

Notice that the array is only sorted if the sort() method is supported. Otherwise the array is left as is, without any changes. Thus, we recommend that you initially assign the array elements in the desired order.

After sorting the array, the printList() function is called to print the corresponding HTML code. printList() is responsible for displaying the lookup list. We'll discuss this function in the next section of the column.

Last but not least, we define an event handling routine for the keyup event, because the lookup list must respond to each key press. The onkeyup event handler is suitable in this case, because the text field is only updated after the user has released the key. Notice that the keyup event is captured at the document level, because the INPUT element does not support the onkeyup event handler on Navigator 4.0x. We'll show you how to make sure the user clicked a key within the text field later in this column. For more information about cross-browser event handling, please refer to Column 11.


Created: March 11, 1998
Revised: March 11, 1998

URL: http://www.webreference.com/js/column15/initialize.html