Using Javascript To Search And Display Info From XML File
Solution 1:
If the file is very large, it will be slow no matter what because you are searching for text in a large string essentially. UPDATE: saw comment that it is 23k line file, this is probably a few megabytes so expect users to load slowly the first time.
You could load the XML into a string, then find the first instance of the search term, call a function to append the entry to your result DIV. Then from the end of the entry you just identified or if you are lazy from the character after the search term ends, run the search again.
The function to append will just search backwards from your search term hit (character offset index location in the string) for <entry> and forward to the string </entry>.
To code both of these functions you mainly need the String function indexOf.
Not sure why, but the solution gives an error on JSFiddle that it cant find the searchXML function. It works fine when you save it into a .html file and open it in browser.
*NOTE: I removed the line breaks in your XML file to quickly mock up the example, you can load the XML into a string this way.
HTML
<body>
<input id="srch" type="text" >
<br />
<input type="submit" value="Submit" onClick="searchXML()">
<br />
<br />
<div id="results">
</div>
</body>
JS
var dict = '<?xml version="1.0" encoding="UTF-8"?><dictionary> <norman> <entry>A 1. the male or positive principle, yang 2. convex, raised 3.interjection ofresponse 4. interjection of fear S. vocative particle 6. a tooth in the Manchuscript A A an interjection of casual response </entry> <entry>A I BUKDAN the outside edge of a piece of folded paper </entry> <entry>A JIJUN I ACANGGA a bronze identification token with raised characters used togain admittance to a city at night </entry> <entry>A JILGAN a yang tone in music A FA SERE ONGGOLO see afanggala </entry> <entry>A SI a sound used for driving chickens or birds </entry> <entry>A TA (onom.) the sound of a commotion ABA 1. hunt, battue 2. where </norman></dictionary>';
//NOTE: if your XML contains any ' characters it will break.. search replace your dictionary for the ' character first replace it with " maybe, this is the fastest solution to this, ok if your dictionary is not dynamic
function searchXML() {
var term = document.getElementById('srch').value;
getNextEntry(term, 0, dict.length-1);
}
function getNextEntry(term, startIndexPos, endIndexPos){
var n = dict.indexOf(term, startIndexPos,endIndexPos);
if (n > 0) {
//found hit
addHitToDIV(n);
getNextEntry(term, n + term.length + 1, endIndexPos);
} else {
//done searching
return -1;
}
}
function addHitToDIV(startIndexPos) {
var fullEntry;
var first = dict.lastIndexOf("<entry>", startIndexPos);
var last = dict.indexOf("</entry>", startIndexPos,dict.length-1);
document.getElementById('results').innerHTML = document.getElementById('results').innerHTML + "<p>" + dict.substring(first+7, last-1) + "</p><br>";
}
Post a Comment for "Using Javascript To Search And Display Info From XML File"