Skip to content Skip to sidebar Skip to footer

Using Javascript To Search And Display Info From XML File

I am currently creating an online dictionary. I have an XML document with the information from the Dictionary stored like this:

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.

jsFiddle solution here

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>";
}

enter image description here


Post a Comment for "Using Javascript To Search And Display Info From XML File"