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.

So I have this xml file eg:

<entry>
    <title>The Title</title>
    <description>Description here</description>
</entry>

So the thing I'd love to do is to have an html with a search form in it and then based on the search term display all the results within the same page (empty div for example) that matches that term.

Would that be possible?

MANY thanks in advance for anyone that can help me on this!

回答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>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" id="search"  autocomplete="off" />
<p id="output"></p>

<script type="text/javascript">
$(document).ready(function(){
    $('#search').on('keyup', function(){
        $.ajax({
            type: "GET",
            url: "test.xml",
            dataType: "xml",
            success: parseXML
        });
    });
});
function parseXML(xml){
    var searchFor = $('#search').val();
    var reg = new RegExp(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>

来源：https://stackoverflow.com/questions/12118057/search-an-xml-file-and-display-results-with-javascript

标签

javascript

xml