Skip to content Skip to sidebar Skip to footer

Search An Xml File And Display Results With Javascript

I have been searching everywhere for the last 3 hours and I couldn't find anything that could help me. I'm very sorry if there are any answer around but I just couldn't get to it.

Solution 1:

I was curios about this, and none answered so I tried some things and tuns out best and easy way to do this is with jQuery

test.xml

<item><entry><title>The Title</title><description>Description here</description></entry><entry><title>The Title 2 </title><description>Description here second</description></entry></item>

index.html

<!DOCTYPE html><html><head><scriptsrc="http://code.jquery.com/jquery-latest.js"></script></head><body><inputtype="text"id="search"autocomplete="off" /><pid="output"></p><scripttype="text/javascript">
$(document).ready(function(){
    $('#search').on('keyup', function(){
        $.ajax({
            type: "GET",
            url: "test.xml",
            dataType: "xml",
            success: parseXML
        });
    });
});
functionparseXML(xml){
    var searchFor = $('#search').val();
    var reg = newRegExp(searchFor, "i");
    $(xml).find('entry').each(function(){
        var title = $(this).find('title').text();
        var titleSearch = title.search(reg);
        var desc = $(this).find('description').text();
        var descSearch = desc.search(reg);
        $('#output').empty();
        if(titleSearch > -1){
            $('#output').append('Found <i>'+searchFor+'<\/i> in title: '+title.replace(reg, '<b>'+searchFor+'</b>')+'<br \/>');
        }
        if(descSearch > -1){
            $('#output').append('Found <i>'+searchFor+'<\/i> in description: '+desc.replace(reg, '<b>'+searchFor+'</b>')+'<br \/>');
        }
    });    
}
</script></body></html>

Post a Comment for "Search An Xml File And Display Results With Javascript"