How to search an xml document by value supplied by user using Ajax

Question

I'm working with a problem that requires that I make a web page that will return a table of information from an XML file conforming to a user request. I'm having trouble getting my code to return anything at all though!

This is a sample of the XML:

<remake>
        <rtitle>Rebecca of Sunnybrook Farm</rtitle>
        <ryear>1938</ryear>
        <fraction>0.8</fraction>
        <stitle>Rebecca of Sunnybrook Farm</stitle>
        <syear>1917</syear>
    </remake>
    <remake>
        <rtitle>The Three Musketeers</rtitle>
        <ryear>1939</ryear>
        <fraction>0.7</fraction>
        <stitle>The Three Musketeers</stitle>
        <syear>1935</syear>
    </remake>

This is my code so far:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

Title of Remake:
<input type="text" id="rtitleSearch"  autocomplete="off" />
<br> </br>
Year of Remake:
<input type="text" id="ryearSearch" autocomplete="off" />
<br></br>
<button type="button" onclick="parseXML()">Submit</button>
<p id="output"></p>

<script type="text/javascript">
$(document).ready(function(){
    $('#search').on('keyup', function(){
        $.ajax({
            type: "GET",
            url: "remakes.xml",
            dataType: "xml",
            success: parseXML
        });
    });
});
function parseXML(xml){
    var searchFor = $('#rtitleSearch').val();
    var reg = new RegExp(searchFor, "i");
    $(xml).find('remake').each(function(){
        var title = $(this).find('rtitle').text();
        var titleSearch = title.search(reg);
        $('#output').empty();
        if(titleSearch > -1){
            $('#output').append('Found <i>'+searchFor+'</i> in title: '+title.replace(reg, '<b>'+searchFor+'</b>')+'<br />');
        }

    });    
}
</script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Could any one point me in the right direction to get this to respond to inputs?

Thanks.

score 1 · Answer 1 · edited May 23 '17 at 12:10

Look at the following piece of your code:

$(xml).find('remake').each(function(){

Note that xml is an XML string (not HTML).

Using $(string) you can convert a piece of HTML string into a jQuery object, but I think that in this case the result will be empty.

Maybe you should use indexOf of search on xml as a string value?

Or use $.parseXML(...).

Edit

Look at stackoverflow.com/questions/6507293/convert-xml-to-string-with-jquery. It shows how to convert XML string to "normal" string or other possible operations.

How to search an xml document by value supplied by user using Ajax

1 Answers1

Edit