You are here: irt.org | Articles | JavaScript | Object | Searching [ previous next ]
Published on: Sunday 9th February 1997 By: Martin Webb
The hierarchy of the basic components looks like this:
|
The search.htm is the parent document of the two frames tools and results.
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 = '';
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';
}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?
View the search.htm, tools.htm and results.htm source code.
Arrays, Object Arrays and Sorting
Text Strings and String Objects