Guest Bart Lamers Posted September 12, 2007 Share Posted September 12, 2007 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 More sharing options...
justsomeguy Posted September 12, 2007 Share Posted September 12, 2007 Are you seeing this message?var notfound = document.createTextNode("Sorry, I couldn't find anything like "+searchterm +"!"); Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.