Question

I have the following XML file containing letter and word definitions in this format A – B – C – D – etc…

<container>
    <data name="apple" definition="A sweet fruit. bla bla bla"/>
    <data name="bat" definition="bla bla bla"/>
    <data name="book" definition="bla bla bla"/>
    <data name="cat" definition="bla bla bla"/>
    <data name="cup" definition="bla bla bla"/>
</container>

If I click on B it should load bat and book in a box. If I click on book it should display related definition on the right area. How can I create this functionality using jQuery?

Answer 1

If your HTML is like this:

<div class="search" data-letter="a">A</div>
<div class="search" data-letter="b">B</div>
<div class="search" data-letter="c">C</div>
<div class="search" data-letter="d">D</div>
<div id="results"></div>

Then the javascript:

$(function(){

    var xml_data;

    // Load the XML
    $.get("your_xml_file.xml", function(data){

        xml_data = $(data);

        // On click of search buttons
        $(".search").bind("click", function(){

            // Clear the results div
            $("#results").html("");

            // Get the desired letter
            var letter = $(this).data("letter");

            // Loop through each result which has name attribute beginning with letter
            xml_data.find("data[name^='"+letter+"']").each(function(k, v){

                // Append definition to results
                $("#results").append($(this).attr("definition") + "<br/>");
            });

        });

    });

});

This should do what you are asking about.