[Back to previous page] [Next Page in Series]

Ken Ward's Java Script Tutorial ...

Making a JavaScript Search Engine

Making a JavaScript Search Engine, so far as JavaScript is concerned, is actually quite easy. The following is a search for this whole site. Try some search words. And try some it most likely won't find to see what happens. Of course, you could try 'script' and 'knitting'.


Enter a search word or phrase:



The JavaScript for the above is quite easy. However, to understand it, you might need to check out the information on normal drop-down menus., and check out stuff in the HTML tutorial and elsewhere in this tutorial.

Here is the code in the HEAD of the document:

<script type="text/javascript">

<!--//

function nullOptions(aMenu){

tot=aMenu.options.length;

if (aMenu.options.length>0)

for (i=0;i<tot;i++)

{

aMenu.options[i]=null

}

aMenu.options.length=0;

}

function MySearchF(){

nullOptions(document.F187.MySelect);

URLs=new Array()

titls=new Array()

Kwds=new Array()

URLs[0]="alertConfirm.htm";

titls[0]="CONFIRM MESSAGE BOXES";

Kwds[0]="HTML, JAVASCRIPT, TUTORIAL, LESSONS, GUIDE, CHOICES IN MESSAGE BOXES, CONFIRM, ALERTS,IF,LOCATION,CONFIRM,";

/* ..... There are a lot of URLs, Keywords, Titles so I have just included the first set for one page */

var joined=new Array()

/* We start off a new array by joining together the titles and keywords */

/* ####################### Only the data above needs to be changed ####################### */

var joined=new Array()

{

for (i=0;i<URLs.length; i++){

joined[i]=titls[i]+Kwds[i]

}

Searchphrase=document.F187.MyText.value

j=0;

checker=0;

if (document.F187.MyText.value.length<1){

alert('Please enter something to search for.');

}

else {

var myFoundURL=new Array();

var myFoundText=new Array();

for (i=0;i<URLs.length; i++)

{

if (joined[i].indexOf(Searchphrase.toUpperCase())>-1){

checker+=1;

j++;

myFoundURL[j]=URLs[i];

myFoundText[j]=titls[i];

}

}

if (checker>0){

document.F187.MySelect.options[0]=new Option('Results: '+checker,'')

for (j=1;j<checker+1;j++)

{

document.F187.MySelect.options[j]=

new Option(myFoundText[j],myFoundURL[j]);

}

}

else {

document.F187.MySelect.options[0]=new Option('Sorry! Couldn\'t find anything:','')

 

}

}

}

//Older Netscapes like a refresh, but Microsoft doesn't and nor does Net 7

/*if (navigator.appName.indexOf("Netscape")>-1)

history.go(0)*/

}

//-->

</script>

<script type="text/javascript">

<!--//

function searchGo(){

if (document.F187.MySelect.selectedIndex>0){

location=document.F187.MySelect.options[document.F187.MySelect.selectedIndex].value

}

else {

alert('Please select an option.')

}

}

//-->

</script>

<!-- ####################### stop copying script here ####################### -->

The search contains 218 URLs with their data! So it is rather long. But the JavaScript to run it is rather simple. The JavaScript form code follows:

<!-- ####################### start of form ####################### -->

<form name="F187" id="F187" onsubmit="MySearchF(); return false">

<br />

Enter a search word or phrase:

<br />

<input type="text" name="MyText" id="MyText"value="" size="27" maxlength="25" />

<input type="button" value="Search" onclick="MySearchF()" />

<br />

<select name="MySelect" id="MySelect" style="width:250" size="5" ondblclick="searchGo()">

<option>

Your answer will appear here

</select>

<br />

<input type="button" value="Go!" onclick="searchGo()}" />

<br />

Produced by

<a href="http://www.trans4mind.com/personal_development/jsEditorTutorial/searchGenerator.htm">

Search

Engine Generator

</a>

.

</form>

<!-- ####################### end of form ####################### -->

  To be honest, although I designed the orginal code, I did not write the site's Search Page by hand. I actually produced it with Search Engine Generator (which I wrote to make dealing with the data easier, and is part of jsEditor). Often the hardest part of the task is not the scripting but assembling a large amount of data. Utilities can make this task relatively easy where doing it by hand would take a great deal of time.

More on search engine:

Search Engine in Frames

Search Engine in IFRAMES

 

And for some programming for your brain: check out New Life Course