Jump to content

earch / filter XML data with JS

Guest Bart Lamers

Recommended Posts

Guest Bart Lamers

I got a question how to search / filter XML data and show them on a html page with Javascript?With the code below, it only display the searchkeyword, butt I want to display the whole shift, so (PR, SR, DATE, H_OWNER, D_OWNER, H and D).XML file: test.xml

<?xml version ="1.0" encoding="UTF-8"?><HA>	<SHIFTS>		<SHIFT>			<PR>2</PR>			<SR>7</SR>			<DATE>20080106</DATE>			<H_OWNER>12</H_OWNER>			<D_OWNER>106</D_OWNER>			<H>12</H>			<D>106</D>		</SHIFT>		<SHIFT>			<PR>2</PR>			<SR>11</SR>			<DATE>20080106</DATE>			<H_OWNER>12</H_OWNER>			<D_OWNER>167</D_OWNER>			<H>6</H>			<D>167</D>		</SHIFT>	</SHIFTS></HA>

HTML-file to search in the XML-data: search.html

<html>	<head>		<script type="text/javascript" src="searchindex.js"></script>	</head>	<body>		<form action="">			<select name="Keuze" id="selectme">				<option value="DATE">DATE</option>				<option value="H_OWNER">H_OWNER</option>				<option value="D_OWNER">D_OWNER</option>				<option value="H">H</option>				<option value="D">D</option>				<option value="SR">SR</option>			</select>			<input type="text" id="searchme" />			<input type="submit" onclick="searchIndex(); return false; " />			<input type="button" value="Clear" onClick="history.go()" />		</form>		<div id="resultshere">		</div>	</body></html>

Javascript for searching: searchindex.js

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("test.xml");	}// MSIE uses ActiveX	else if (window.ActiveXObject) {		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");		xmlDoc.async = "false";		xmlDoc.load("test.xml");	}}function searchIndex() { // search the index	if (!xmlDoc) {		loadIndex();	}	// get the search term from a form field with id 'searchme'	var selectterm = document.getElementById("selectme").value;	var searchterm = document.getElementById("searchme").value;	var allitems = xmlDoc.getElementsByTagName(selectterm);	results = new Array;	if (searchterm.length < 1) {		alert("Voer een zoek opdracht in");	} 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.match(exp) != null) {				results.push(allitems[i]);			}		}// send the results to another function that displays them to the user	showResults(results, searchterm);	}}// The following is just an example of how you// could handle the search resultsfunction showResults(results, searchterm) {	if (results.length > 0) {// if there are any results, put them in a list inside the "resultshere" div		var resultshere = document.getElementById("resultshere");		var header = document.createElement("h2");		var list = document.createElement("ul");		var searchedfor = document.createTextNode("You've searched for "+searchterm);		resultshere.appendChild(header);		header.appendChild(searchedfor);		resultshere.appendChild(list);		for (var i=0;i<results.length;i++) {			var listitem = document.createElement("li");			var item = document.createTextNode(results[i].lastChild.nodeValue);			list.appendChild(listitem);			listitem.appendChild(item);		}	} else {// else tell the user no matches were found		var resultshere = document.getElementById("resultshere");		var para = document.createElement("p");		var notfound = document.createTextNode("Sorry, I couldn't find anything like "+searchterm +"!");		resultshere.appendChild(para);		para.appendChild(notfound);	}}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...