Home > Código > Simple Javascript/XML based search

Simple Javascript/XML based search

August 27th, 2009

This code uses javascript to search in a XML index based and it allows to do it without the need of server side code (like PHP+MySQL)

This code is based on the work of Wieland and mapmaker who publish their codes at Dzone Snippets but resolve a some search problems.

Error found: When a search is being done the code search for similar terms intead of the exact search term in the XML index resulting in fail info returned (example: searching for “1524″ can give us as results the content of the items  “1524, 11524, 21524, etc”)

My code has fixed this issue returning info of the exact seach term (code removed has been highlighted in red, added code in green)

Example XML

<?xml version=”1.0″ encoding=”utf-8″?>
<searchable_index>
<item meta1=”22″ meta2=”87″>0000</item>
<item meta1=”25″ meta2=”29″>0001</item>
<item meta1=”27″ meta2=”54″>0002</item>
<item meta1=”23″ meta2=”43″>0003</item>
</searchable_index>

The javascript code

<script type=”text/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(“index.xml”);
}
// MSIE uses ActiveX
else if (window.ActiveXObject) {
xmlDoc = new ActiveXObject(“Microsoft.XMLDOM”);
xmlDoc.async = “false”;
xmlDoc.load(“index.xml”);
}
}

function searchIndex() {

// search the index (duh!)
if (!xmlDoc) {
loadIndex();
}
// get the search term from a form field with id ‘searchme’

var searchterm = document.getElementById(“searchme”).value;
var allitems = xmlDoc.getElementsByTagName(“item”);
results = new Array;
if (searchterm.length < 2) {
alert(“Ingrese al menos dos caracteres”);
} else {
for (var i=0;i<allitems.length;i++) {
// see if the XML entry matches the search term,
// and (if so) store it in an array
var name = allitems[i].lastChild.nodeValue;
//    var exp = new RegExp(searchterm,”i”);
if ( name == searchterm ) {
//    if ( name.match(exp) != null) {
results.push(allitems[i]);

}
}
// send the results to another function that displays them to the user
showResults(results, searchterm);
}
}

// Write search results to a table
function showResults(results, searchterm) {

if (results.length > 0) {

// if there are any results, write them to a table

for (var i=0;i<results.length;i++) {
var item = document.createTextNode(results[i].getAttribute(“name”));
var item1 = results[i].getAttribute(“meta1″);
var item2 = results[i].getAttribute(“meta2″);
var visitorname = document.getElementById(“visitorname”).value;
var visitormail = document.getElementById(“visitormail”).value;
}
//    alert(“codigo=” + searchterm + “name=” + visitorname + “mail=” + visitormail + “uno=” + item1 + “dos=” + item2);
window.location.href = “email_ex.php?codigo=” + searchterm + “&name=” + visitorname + “&mail=” + visitormail + “&uno=” + item1 + “&dos=” + item2;
return false;

} else {
// else tell the user no matches were found
var notfound = alert(‘Código de cliente ‘+searchterm+’ no encontrado’);
}
}
</script>

Código

  1. No comments yet.
  1. No trackbacks yet.