|
Searching
You are here: irt.org | Articles | JavaScript | Object | Searching
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/index.htm',
'Calendar JavaScript',
'Demonstrations of different calendar displays.',
'JavaScript, Functions...',
'19961201');
setArticle('../js002/index.htm',
'Array-Tours JavaScript',
'Demonstration of navigation tools.',
'Frames, JavaScript, Arrays, Objects, Forms',
'19970101');
setArticle('../js003/index.htm',
'Search JavaScript',
'Explanation JavaScript Searching.',
'Frames, JavaScript, Arrays...',
'19970209');
setArticle('../js004/index.htm',
'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.
Feedback on 'Searching'
View the profile on Martin Webb and the list of other Articles by Martin Webb.
|
|