Simple Javascript/XML based search
// Use javascript to search an XML based index.
// Provides simple site search where no server-side
// alternatives are available (for example: on a CD ROM)
// The sample XML:
// The javascript:
// Here's some s(a|i)mple HTML that should work with the code above:
// Provides simple site search where no server-side
// alternatives are available (for example: on a CD ROM)
// The sample XML:
1 2 <?xml version="1.0" encoding="utf-8"?> 3 <searchable_index> 4 <item>John</item> 5 <item>Paul</item> 6 <item>George</item> 7 <item>Ringo</item> 8 </searchable_index>
// The javascript:
1 2 window.onload = loadIndex; 3 4 function loadIndex() { // load indexfile 5 // most current browsers support document.implementation 6 if (document.implementation && document.implementation.createDocument) { 7 xmlDoc = document.implementation.createDocument("", "", null); 8 xmlDoc.load("index.xml"); 9 } 10 // MSIE uses ActiveX 11 else if (window.ActiveXObject) { 12 xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 13 xmlDoc.async = "false"; 14 xmlDoc.load("index.xml"); 15 } 16 } 17 18 19 function searchIndex() { // search the index (duh!) 20 if (!xmlDoc) { 21 loadIndex(); 22 } 23 // get the search term from a form field with id 'searchme' 24 25 var searchterm = document.getElementById("searchme").value; 26 var allitems = xmlDoc.getElementsByTagName("item"); 27 results = new Array; 28 if (searchterm.length < 3) { 29 alert("Enter at least three characters"); 30 } else { 31 for (var i=0;i<allitems.length;i++) { 32 // see if the XML entry matches the search term, 33 // and (if so) store it in an array 34 var name = allitems[i].lastChild.nodeValue; 35 var exp = new RegExp(searchterm,"i"); 36 if ( name.match(exp) != null) { 37 results.push(allitems[i]); 38 } 39 } 40 // send the results to another function that displays them to the user 41 showResults(results, searchterm); 42 } 43 } 44 45 46 // The following is just an example of how you 47 // could handle the search results 48 function showResults(results, searchterm) { 49 50 if (results.length > 0) { 51 // if there are any results, put them in a list inside the "resultshere" div 52 var resultshere = document.getElementById("resultshere"); 53 var header = document.createElement("h5"); 54 var list = document.createElement("ul"); 55 var searchedfor = document.createTextNode("You've searched for "+searchterm); 56 resultshere.appendChild(header); 57 header.appendChild(searchedfor); 58 resultshere.appendChild(list); 59 for (var i=0;i<results.length;i++) { 60 var listitem = document.createElement("li"); 61 var item = document.createTextNode(results[i].lastChild.nodeValue); 62 list.appendChild(listitem); 63 listitem.appendChild(item); 64 } 65 } else { 66 // else tell the user no matches were found 67 var resultshere = document.getElementById("resultshere"); 68 var para = document.createElement("p"); 69 var notfound = document.createTextNode("Sorry, I couldn't find anything like "+searchterm +"!"); 70 resultshere.appendChild(para); 71 para.appendChild(notfound); 72 } 73 }
// Here's some s(a|i)mple HTML that should work with the code above:
1 2 <html> 3 <head> 4 <script type="text/javascript" src="searchindex.js"></script> 5 </head> 6 <body> 7 <form action=""> 8 <input type="text" id="searchme" /> 9 <input type="submit" onclick="searchIndex(); return false;" /> 10 </form> 11 <div id="resultshere"> 12 </div> 13 </body> 14 </html> 15
