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'.
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="https://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