source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript" src="searchindex.js"></script>
<style>
body{
width:1000px;
margin:0px auto;
position:relative;
top:300px;
}
#dd{
position:relative;
background:red;
border:4px solid yellow;
}
#dd1{
text-align:center;
}
#searchProduct{
text-align:center;
position:relative;
bottom:100px;
font-size:24px;
font-family:"Lucida Console";
font-weight:bold;
}
</style>
</head>
<body>
<div id="searchProduct">Search Product</div>
<div id="dd1">
<form id="dd" name="myForm" action="#">
<input type="text" id="searchme" />
<input type="submit" onclick="searchIndex(); return false; " /><!--return false;-->
</form>
</div>
<div id="resultshere">
</div>
</body>
</html>
/---------------- Javascript --------------------/
window.onload = loadIndex;
function loadIndex() { // load indexfile
// most current browsers support document.implementation
if (document.implementation && document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.load("index9.xml");//showprices
}
// MSIE uses ActiveX
else if (window.ActiveXObject) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.load("index9.xml");//showprices
}
}
function clearBox()
{
document.getElementById("resultshere").innerHTML = "";
}
function searchIndex() { // search the index
if (!xmlDoc) {//check whether xmlDoc is not a null
loadIndex();
}
var searchterm = document.getElementById("searchme").value;
searchtermconvert=searchterm.toString();
var arrsearch=xmlDoc.getElementsByTagName("Search");
results = new Array;//declare new Array called results
var res = searchtermconvert.split(' ');
// alert(res[0]);
// alert(res[1]);
if (res.length < 0) {// check if the seach term is not less than 3 characters
alert("Enter at least three characters");
} else {
for (var i=0;i<arrsearch.length;i++){
//if (x[i].textContent != null) {
var variable = arrsearch[i].textContent;//starts from i+1 second
var exp = new RegExp(res[0],"i");// declare a regular expression object which describes a pattern of characters
var exp2 = new RegExp(res[1],"i");// declare a regular expression object which describes a pattern of characters
var exp3 = new RegExp(res[2],"i");
var exp4 =new RegExp(res[3],"i");
var exp5= new RegExp(res[4],"i");
//i-Perform case-insensitive matching g-Perform a global match (find all matches rather than stopping after the first match) m-Perform multiline matching
if ( variable.match(exp) != null && variable.match(exp2) != null && variable.match(exp3) != null && variable.match(exp4) != null && variable.match(exp5) != null) {
results.push(arrsearch[i]);// and (if so) store it in an array
}
}
showResults(results,res);
}
}//----------------------------------------------------------------------------------------------end of searchIndex
function showResults(results,res) {
if (results.length > 0) {
var resultshere = document.getElementById("resultshere"); // if there are any results, put them in a list inside the "resultshere" div
if (resultshere=>1){
clearBox();
}
var header = document.createElement("h5");// just a markup for showing the results - heading
var list = document.createElement("table");// just a markup for showing the results - unordered list
var searchedfor = document.createTextNode("You've searched for " + res) ;
resultshere.appendChild(header);// just a markup for showing the results - header
header.appendChild(searchedfor);// just a markup for showing the results - "You've searched for "
resultshere.appendChild(list);// just a markup for showing the results - list = document.createElement("ul");
for (var i=0;i<results.length;i++) { // go through results Array from searchIndex()
//var x = ff;
var listitem = document.createElement("tr"); // create list item for var list = document.createElement("ul");
var list_td= document.createElement("td");
var item = document.createTextNode(results[i].textContent);
//var item2 = document.createTextNode(arrsearch[0].textContent);
//alert(arrsearch[0].textContent);
//alert(results[i].textContent);
// list.appendChild(item2);
list.appendChild(listitem); // combine var list = document.createElement("ul"); with var listitem = document.createElement("li");
listitem.appendChild(item); // attach parameter item(var item = document.createTextNode(results[i].lastChild.nodeValue);) to the listitem(var item = document.createTextNode(results[i].lastChild.nodeValue);)
}//------------------------------------------------------------------end of for loop for (var i=0;i<results.length;i++)
}
else {
// else tell the user no matches were found
var resultshere = document.getElementById("resultshere");// reach the element with "resultshere"
var para = document.createElement("p");// create and element(in this case a paragraph) for showing the "resultshere"
var notfound = document.createTextNode("Sorry, I couldn't find anything like "+res +"!");//create a text with a searchterm attachment
resultshere.appendChild(para);// append to resultshere a para variable which contains(var para = document.createElement("p"))
para.appendChild(notfound);// append to para variable which contains(var notfound = document.createTextNode("Sorry, I couldn't find anything like "+searchterm +"!");)
}
}
/---------------XML--------------- -------/
<?xml version="1.0" encoding="utf-8"?>
<searchable_index>
<Search>
<title>driver</title>
<keyword>101 101</keyword>
<link>R-12</link>
<color>white</color>
<itemid>test</itemid>
</Search>
<Search>
<title>driver</title>
<keyword>102</keyword>
<link>R-22</link>
<color>red</color>
<itemid>1test</itemid>
</Search>
<Search>
<title>driver</title>
<keyword>101</keyword>
<link>R-12 yellow</link>
<color>yellow</color>
<itemid>2_3_test</itemid>
</Search>
<Search>
<title>hammer</title>
<keyword>102</keyword>
<link>R-22</link>
<color>yellow</color>
<itemid>3test</itemid>
</Search>
<Search>
<title>saw</title>
<keyword>101</keyword>
<link>R-12</link>
<color>black yellow</color>
<itemid>001</itemid>
</Search>
<Search>
<title>driver</title>
<keyword>102 dewalt</keyword>
<link>R-23</link>
<color>redyellow</color>
<itemid>100</itemid>
</Search>
<Search>
<title>driver</title>
<keyword>102</keyword>
<link>R-23</link>
<color>blackblack</color>
<itemid>100</itemid>
</Search>
<Search>
<title>driver</title>
<keyword>101 101</keyword>
<link>R-12</link>
<color>white</color>
<itemid>test</itemid>
</Search>
<Search>
<title>driver</title>
<keyword>102</keyword>
<link>R-22</link>
<color>red</color>
<itemid>1test</itemid>
</Search>
<Search>
<title>driver</title>
<keyword>101</keyword>
<link>R-12 yellow</link>
<color>yellow</color>
<itemid>2_3_test</itemid>
</Search>
<Search>
<title>hammer</title>
<keyword>102</keyword>
<link>R-22</link>
<color>yellow</color>
<itemid>3test</itemid>
</Search>
<Search>
<title>saw</title>
<keyword>101</keyword>
<link>R-12</link>
<color>black yellow</color>
<itemid>001</itemid>
</Search>
<Search>
<title>driver</title>
<keyword>102 dewalt</keyword>
<link>R-23</link>
<color>redyellow</color>
<itemid>100</itemid>
</Search>
<Search>
<title>driver</title>
<keyword>102</keyword>
<link>R-23</link>
<color>blackblack</color>
<itemid>100</itemid>
</Search>
<Search>
<title>driver</title>
<keyword>101 101</keyword>
<link>R-12</link>
<color>white</color>
<itemid>test</itemid>
</Search>
<Search>
<title>driver</title>
<keyword>102</keyword>
<link>R-22</link>
<color>red</color>
<itemid>1test</itemid>
</Search>
<Search>
<title>driver</title>
<keyword>101</keyword>
<link>R-12 yellow</link>
<color>yellow</color>
<itemid>2_3_test</itemid>
</Search>
<Search>
<title>hammer</title>
<keyword>102</keyword>
<link>R-22</link>
<color>yellow</color>
<itemid>3test</itemid>
</Search>
<Search>
<title>saw</title>
<keyword>101</keyword>
<link>R-12</link>
<color>black yellow</color>
<itemid>001</itemid>
</Search>
<Search>
<title>driver</title>
<keyword>102 dewalt</keyword>
<link>R-23</link>
<color>redyellow</color>
<itemid>100</itemid>
</Search>
<Search>
<title>driver</title>
<keyword>102</keyword>
<link>R-23</link>
<color>blackblack</color>
<itemid>100</itemid>
</Search>
</searchable_index>