Archive

Archive for August, 2009

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

Busqueda simple basada en Javascript/XML

August 27th, 2009

Este código usa javascript para buscar en un indice basado en XML y provée la posibilidad de realizar búsquedas en un website sin necesidad de ejecutar código en el servidor (como es el caso de PHP+MySql)

Este código está basado en el trabajo de Wieland y mapmaker que publicaron sus códigos en Dzone Snippets y soluciona un error en la búsqueda.

Error encontrado: Al realizar la búsqueda de un término (palabra o número), el código busca términos parecidos y no uno exactamente igual en el índice del archivo XML, el resultado de esto es que el código puede devolver información erronea (ej: buscar “1524″ puede entregar como resultado los contenidos de los ítems “1524, 11524, 21524, etc”)

El siguiente código contiene contiene las actualizaciones necesarias para una búsqueda exacta (las líneas de código quitadas han sido resaltadas en rojo y la línea de código agregada ha sido resaltada en verde)

El archivo 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>

El código javascript

<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