The Search Results HTML Document
HTML Ebook – Part 7
The results on the search results page consists of pieces of information of the chapter pages that are related to the phrase typed in the Search Box. Each piece of information is made up of the title from the title tag of the page found and the description from the META description tag of the page found. This description is the description of the content of the page found. The title for each piece of information is also a hyperlink to the page found.
The file name of the result page is searchResults.htm . It was opened in the content frame by the HTML Form element of the banner when the Search Submit button was clicked. It has code, which we shall see in this part of the series. If there are any search results, this code will display them; if there is no search result, the code will display, No result found.” on the page.
You will have a link to download the complete code for the project toward the end of this last part of the series.
Note: For the code samples to work, you should change the dot just before the reserved word, innerHTML, to a full-stop.
Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at firstname.lastname@example.org. That is, contact me for the slightest problem you have about what you are reading.
For simplicity we assume that the phrase the user types in the Search Box consists of key words. This means that prepositions and conjunctions typed are keywords. In you commercial project you can decide to add the code so that prepositions and conjunctions are removed before the search is done. For the purpose of this series, let us allow things to be that simple; Keywords and Searching need a whole series of articles, which I will not go into now.
The Search Algorithm
In this project, you have a very simple search algorithm. The phrase typed in by the user is broken down into individual words. If any of these words is found in a chapter page, the title and description of that page is copied to the search results page, which should already be displayed on screen. In the results page, the title is a link. For this pedagogic article, it is that simple. In your commercial project you can make the search algorithm as complex and as useful as you want. For example, you may make the search algorithm throw away the prepositions and the conjunctions typed in by the user; you will need extra code for this. As another example, you may make the title and description of the pages that have most of the keywords display first in the result page and the ones with fewer keywords display last (in a descending order); you may also take the frequency of occurrence of a keyword in a page into consideration; all that need extra code. As yet another example, instead of displaying the description of the Meta tag in the results page, you can have phrases and sentences that contain the keywords in the chapter page displayed in the results page; again this needs extra code.
If the customer is willing to pay more and if you can do the extra coding, then go ahead and do the extra code for the commercial project. As a minimum, you should remove the prepositions and conjunctions in any commercial project; I have not addressed that in this series.
Use of Ajax
The chapter pages are actually loaded by Ajax. You might not know this: if the resource called by the HTTP GET or POST method of Ajax is an HTML file, the HTML file arrives at the browser as a string, to be used by Ajax. The resource does not arrive as a web page to be displayed; it arrives as a string and is not seen by the user. As indicated in part 1 of this series, you need to understand Ajax basics in order to fully understand this series. If you do not understand the basics of Ajax, then read my series titled, Ajax Web Technology Explained, in this blog. To arrive at the series, just type the title and my name, Chrys in the Search Box of this page or in the Google Search box of this page, and click Search.
The Links href Array for the Chapters Files
pagesArr = new Array();
pagesArr = “Chapter1.htm”;
pagesArr = “Chapter1/Chapter1-Section1.htm”;
pagesArr = “Chapter1/Chapter1-Section2.htm”;
pagesArr = “Chapter1/Chapter1-Section3.htm”;
pagesArr = “Chapter2.htm”;
pagesArr = “Chapter2/Chapter2-Section1.htm”;
pagesArr = “Chapter2/Chapter2-Section2.htm”;
pagesArr = “Chapter2/Chapter2-Section3.htm”;
pagesArr = “Chapter3.htm”;
pagesArr = “Chapter3/Chapter3-Section1.htm”;
pagesArr = “Chapter3/Chapter3-Section2.htm”;
pagesArr = “Chapter3/Chapter3-Section3.htm”;
The Array of Ajax Objects
In order to download anything using Ajax, you need an object. The above array shows 12 pages that have to be downloaded as strings. This means you need 12 Ajax objects. There is an Ajax function, which is called the number of times the above array is long. In this project the above array has a length of 12. Your own project may have some other length. So in this project, the Ajax function creates 12 Ajax objects. These 12 objects created become elements of a new array. This new array is declared as follows:
var ajaxObjArr = new Array(); //an array of Ajax objects
So the name of the first Ajax object is ajaxObjArr, the name of the second is ajaxObjArr, name of third is ajaxObjArr, and so on.
The Ajax Function
This is the Ajax function:
// Firefox, Opera 8.0+, Safari
ajaxObjArr[j]= new XMLHttpRequest();
// Internet Explorer
ajaxObjArr[j]= new XDomainRequest();
ajaxObjArr[j]= new ActiveXObject(“Msxml2.XMLHTTP”);
ajaxObjArr[j]= new ActiveXObject(“Microsoft.XMLHTTP”);
alert(“Your browser does not support AJAX!”);
if (ajaxObjArr[j].readyState == 4)
//all the searching in each file string is done here for each of
//the Ajax objects corresponding to the chapter pages.
ajaxObjArr[j].open(“POST”, pagesArr[j], true);
The number of times the function is called is equal to the number of files to be searched, which is equal to the length of the pagesArr array. The function is called with the number in the sequence sent as argument. The parameter for this in the function is j and it is also used to identify an Ajax object in the function. When an Ajax object is created it is made an element of the ajaxObjArr array.
All the searching in each file string is done when the readyState of the property of a particular Ajax object (ajaxObjArr[j]) is 4. The Searching code portion has not been shown in the above code.
The HTTP POST method was used. In the open method of the Ajax object, a particular file, pagesArr[j]is requested for the particular object, ajaxObjArr[j]. No query string is sent, so the argument of the Ajax object sent method is null. The last but one statement in the Ajax function is always used with the Ajax HTTP POST method.
The above Ajax function is called the number of times by the following for-loop:
As you can see from the for-loop, the number of times the Ajax function is called is equal to the length of the pagesArr array.
The Ajax readyState Block
As mentioned above, all the searching in each file string is done when the readyState of the property of a particular object (ajaxObjArr[j]) is 4. When this happens the block code for this event is executed. This block has 4 code segments. This is the first segment:
//assign the responseText to the variable, subject
subject = ajaxObjArr[j].responseText;
In this segment, the response text of the Ajax object is assigned to a new variable, subject. The variable, subject now holds the downloaded file as a string. When the Ajax object downloads the file, it comes as a string and is held by the responseText property of the Ajax object. The above statement makes a copy of this string to the variable, subject.
The second code segment is:
//get the title content
titleIndex = subject.search(/
title = “”;
while (subject.charAt(titleIndex) != “<“)
The second statement in the segment increases the variable, titleIndex by 7. This new value will be used to obtain the content of the title tag. When the content of the title tag is gotten, it is held by the new variable, title, of the statement that follows in the segment. The while-loop in the segment, uses the new titleIndex value for the title content left delimiter and the ‘<‘ character as the right delimiter to obtain the title content, character by character (without the <title> and </title> tags). Inside the loop, titleIndex is incremented to obtain the content character by character into the variable, title.
Here is the third segment of our Ajax readyState block:
//get the page description value
descriptionIndex = subject.search(/<meta name=”\"Description\"” content=”\".+\"” /i);
description = “”;
while (subject.charAt(descriptionIndex) != “\””)
The aim of this segment is to obtain the actual typed description from the META description tag, which is now part of the whole page string, assigned to the variable, subject. An example of the META description tag is:
<meta name=”Description” content=”Summary of Chapter 1 page goes here.”
In this example, the content is “Summary of Chapter 1 page goes here.” The process of obtaining the description is similar to that of obtaining the title content. From the META tag above we see that the left delimiter is indicated by an index, increased by 34 (‘<meta name=”Description” content=”‘ – has 34 characters) and the right delimiter is ‘”
For the above two segments, actual title or content typed in the file should not have a newline character, otherwise the particular regular expression technique would not work.
The last segment for the block is:
//check if any keyword is in the file (subject)
//first collect the keywords into an array
keywordArr = parent.searchVar.split(/\ +|,|\?|\./);
//form regular expression
regexStr = keywordArr;
for (k=1; k<keywordarr.length
regexStr = “|” + keywordArr[k];
//form the regular expression
re = new RegExp(regexStr, “i”);
//if keyword is found on a page, display the page title and description
titleDescriptionStr = “”;
if (subject.search(re) != -1)
titleDescriptionStr = “” + title + “
//if no keyword was found in any page, indicate so
if ((titleDescriptionStr == “”)&&(j == (pagesArr.length – 1)))
document.getElementById(‘B0’)⋅innerHTML = “No result found.”;
Remember that in our simple search algorithm, the phrase typed by the user is broken down into its words; these words are the keywords. Each file string is searched if it has any of the keywords. Once any of the keywords is seen, the search in the string ends. Also remember that the phrase is now in the variable, searchVar in the frameset. To access this variable, from the content frame you have to precede it with, “parent”.
The first statement in this segment splits the phrase into individual words using regular expressions technique. The right operand of the statement returns an array of the words. This array is assigned to the new variable, keywordArr.
The keywords from the keywordArr array are used to form a regular expression. This regular expression will be used to search for any of the keywords in the file string of the variable, subject. The word “any” here means that the keywords in the regular expression will be joined by the regular expressions OR which is | . So the regular expression of keywords to search the file string, will be something like,
The regular expression also has to be case insensitive, because the user can type the right spelling but in a case that is not found in the file.
The next three statements (the for-loop is one statement) create the regular expression and the regular expression object, re.
The rest of the code checks in any of the keywords is found in the file string. If any is found, it displays the title and the description of the file in the BODY element of the searchResults.htm page, which is now in the content frame. Remember, all the code described in this part of the series is in the searchResults.htm page now in the content frame. The Form element in the banner frame simply opens this file in the content frame, then code in this file does all the search and display in its BODY element.
Before displaying the title, the title is made into a link to the file found that has any of the keywords. Let us now look at the rest of the code in the segment. You have the new variable, titleDescriptionStr, which is declared and an empty string assigned to it. This variable would hold the title as a hyperlink and the description of the page found.
The next statement is a large if-statement. The condition of this if-statement checks if the regular expression-any of the keywords- is found in the file string held by the variable, subject. There are two statements in the if-block. The if-block is executed when a keyword is found. The right operand of the first statement uses the title value from the variable, title to form a hyperlink to the page found, in string form, concatenating it with the value of the variable, description. This right operand actually forms a set of HTML tags, but in string form. It assigns the string to the variable, titleDescriptionStr. The next statement displays the value of the variable, titleDescriptionStr in the BODY element of the current searchResults.htm page. The ID of the BODY element is, ‘B0’.
The last statement in the segment is a one-line block if-statement. The block displays, “No result found.” if none of the keywords is found in the file strings. If a keyword is found, the previous if-statement would see it and assign the display result to the variable, titleDescriptionStr. This last if-statement checks if the variable, titleDescriptionStr is empty and if all the chapter files have been searched. If all the chapter files have been searched, the if condition (j == (pagesArr.length – 1)) would return true, meaning the pagesArr array having the href values for all the files has just been completely scanned. And so the last if-condition is,
((titleDescriptionStr == “”)&&(j == (pagesArr.length – 1)))
If the complete condition returns true, then no keyword was found in any of the files (strings) and the block to display “No result found.” Is executed.
Code executed repeatedly
The readyState block and the entire Ajax function, ajaxFn(j), is repeated the number of times equal to the length of the pagesArr array, which has the hyperlink href values of each of the files that is to be searched. The iteration (repetition) number in the sequence is the value of the j parameter. The following code, typed somewhere above, causes the repetition:
Let me end the explanation of the coding, here.
I gave the name, head-directory to the head directory. To use the ebook when you have the head-directory and its sub directories in your computer, all you have to do is to open the directory, head-directory and double-click the file, mainPage.htm. This frameset file will open in your browser. You can then go to any page by clicking a hyperlink or using the search feature.
I used the zip program 7-zip to zip the directory, head-directory and its sub directories into a zip file called, HTML-Ebook.zip. The complete code of the project is in the head-directory and its sub directories. This zip file is an ebook. It can be copied into any computer that has a browser, and unzipped in any directory of the computer. It unzips into the directory, head-directory, which has files and sub directories. Just open the directory, head-directory, double-click the file, mainPage.htm, and you can use the ebook.
The HTML-Ebook.zip file can be downloaded, free, from,
Download the file and unzip it into any directory of your computer, using the 7-zip program. You can get the 7-zip program, free, from https://www.7-zip.org/ .
There you are; HTML ebook.
We have come to the end of the series. Rather long, but worth it. Hope you appreciated it.
To arrive at any of the parts of this series, just type the corresponding title below in the Search Box of this page and click Search (use menu if available):
HTML Ebook Overview
An HTML Ebook Project
The HTML Ebook Frameset
The HTML Ebook Pages
The Banner HTML Document
The Sidebar HTML Document
The Search Results HTML Document