Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org

Related items

Arrays, Object Arrays and Sorting

Seek, and ye shall find

Text Strings and String Objects

Searching

You are here: irt.org | Articles | JavaScript | Object | Searching [ previous next ]

Published on: Sunday 9th February 1997 By: Martin Webb

Hierarchy

The hierarchy of the basic components looks like this:

                 parent                
                tools                




                results                




The search.htm is the parent document of the two frames tools and results.

Database

The search.htm file contains the database information using an array similar to that used in the Array-Tours demonstration:

//This script defines an object called 'articleObject'
function articleObject(href,text,desc,tech,date) {
  this.href = href;
  this.text = text;
  this.desc = desc;
  this.tech = tech;
  this.date = date;
}

//This script creates an array called 'articleArray'
var articleIndex = 0;
var articleArray = new Array();

//This script creates a new instance of a 'articleObject' object
function setArticle(href,text,desc,tech,date) {
  articleArray[articleIndex] =
    new articleObject(href,text,desc,tech,date);
  articleIndex++;
}

//This script populates the array 'articleArray' with
//'articleObject' objects
setArticle('../js001/',
  'Calendar JavaScript',
  'Demonstrations of different calendar displays.',
  'JavaScript, Functions...',
  '19961201');
setArticle('../js002/',
  'Array-Tours JavaScript',
  'Demonstration of navigation tools.',
  'Frames, JavaScript, Arrays, Objects, Forms',
  '19970101');
setArticle('../js003/',
  'Search JavaScript',
  'Explanation JavaScript Searching.',
  'Frames, JavaScript, Arrays...',
  '19970209');
setArticle('../js004/',
  'Image Changing JavaScript',
  'onMouseOver Image Changing...',
  'Frames, JavaScript, onMouseOver, onMouseOut',
  '19970209');

Also contained within the search.htm are several variables that are used to control the output of the search:

var vhref = true;
var vdesc = true;
var vtech = true;
var vdate = true;
var searchtext = '';

Tools

The tools.htm file contains a Form called form1 which controls the search string and the output of the search results:

<form name="form1" onSubmit='goSearch();return false'>
<input name="searchtext" value="">
<input type="submit" value="Search">  
<i>Display URL: <input type="checkbox" name="vhref" checked>  
Description: <input type="checkbox" name="vdesc" checked>  
Techniques: <input type="checkbox" name="vtech" checked>  
Date: <input type="checkbox" name="vdate" checked></i>
</form>

Each of the form elements is individually named, which enables the function goSearch() to update the parent frame prior to redisplaying the results frame:

function goSearch() {
  parent.vhref = document.form1.vhref.checked;
  parent.vdesc = document.form1.vdesc.checked;
  parent.vtech = document.form1.vtech.checked;
  parent.vdate = document.form1.vdate.checked;
  parent.searchtext = document.form1.searchtext.value;
  parent.results.location.href = 'results.htm';
}

Results

The results.htm file checks each of the entries within the database to check if it contains the search string:

var is = parent.searchtext.toUpperCase();

for (var i=0; i < parent.articleIndex; i++) {
  if ((parent.articleArray[i].href.toUpperCase().indexOf(is) != -1) ||
    (parent.articleArray[i].desc.toUpperCase().indexOf(is) != -1) ||
    (parent.articleArray[i].tech.toUpperCase().indexOf(is) != -1) ||
    (parent.articleArray[i].date.toUpperCase().indexOf(is) != -1))
      output();
}

If the string is found then the function output() is used to display the entry:

function output() {
  var href = parent.articleArray[i].href;
  var desc = parent.articleArray[i].desc;
  var text = parent.articleArray[i].text;
  var tech = parent.articleArray[i].tech;
  var date = convert_date(parent.articleArray[i].date);

  document.write('<tr><td valign="top">');
  document.write('<font face="Verdana, Arial, Helvetica">');
  document.write('<font size="4">');
  document.write('<a href="' + href + '" target="_parent">');
  document.write(show(text));
  document.write('</a></font>');
  if (parent.vdate) {
    document.write('<font size="2"><br>');
    document.write(show(date)+'</font>');
  }
  document.write('</font></td>');
  document.write('<td valign="top">');
  document.write('<font face="Arial" size="3">');
  if (parent.vhref) {
    document.write('<font size="2">');
    document.write('<a href="' + href + '" target="_parent">');
    document.write(show(href)+'</a></font>');
  }
  if (parent.vdesc)
    document.write('<p>'+show(desc));
  if (parent.vtech) {
    document.write('<p><b>Techniques:</b> ');
    document.write(show(tech));
  }
  document.write('</font></td></tr>');
}

The information which is displayed is dependent on the check boxes in the tools frame. The tools frame set the variables in the parent frame.

If the variable is true then the information is displayed using the function show():

function find() {
  var string = 
    out.substring(old+len,pos) +
    '<i><font color="#0000FF" size=+1>' +
    out.substring(pos,pos+len) +
    '</font></i>';
  old = pos;
  pos = str.indexOf(src,pos+len);
  if ((pos != -1) && (old != lst)) string += find();
  else string += out.substring(old+len,out.length);
  return string;
}

function show(tmp) {
  if (src != '') {
    out = tmp + ' ';
    str = out.toUpperCase();
    pos = str.indexOf(src);
    lst = str.lastIndexOf(src);
    old = -(str.length);
    if (pos != -1) return find();
    else return out;
  }
  else return tmp;
}

The show() and find() search through the text and format a new string with any occurences of the search string highlighted. This new string is displayed.

Why not try out this example?

Source Code

View the search.htm, tools.htm and results.htm source code.

Related items

Arrays, Object Arrays and Sorting

Seek, and ye shall find

Text Strings and String Objects

Feedback on 'Searching'

©2018 Martin Webb