Search with JavaScript and XML

Question

So I have this xml file eg:

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0" xmlns:g="http://base.google.com/ns/1.0" xmlns:c="http://base.google.com/cns/1.0">
<channel>
    <title>Shop</title>
    <link>http://domain.com/shop</link>
    <description>some text</description>
    <item>
        <title>Entry title 1</title>
        <description>Some description 1</description>
        <g:image_link>http://domain.com/1.jpg</g:image_link>
        <link>http://domain.com/shop/entry1</link>
    </item>
    <item>
        <title>Entry title 2</title>
        <description>Some description 2</description>
        <g:image_link>http://domain.com/2.jpg</g:image_link>
        <link>http://domain.com/shop/entry2</link>
    </item>

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 (create new or empty div for example) that matches that term.

Would that be possible?

Thi is how my search from looks:

<div class="searchForm">
<form onsubmit="this.sfSbm.disabled=true" method="post" action="/shop/search">
<input name="query" placeholder="Search" type="text" >
<input class="searchSbmFl" name="sfSbm" value="Find" type="submit">
</form>
</div>

I want to get as a result this code or something like this:

<div class="searchForm">
<form onsubmit="this.sfSbm.disabled=true" method="post" action="/shop/search"><input name="query" placeholder="Search" type="text">
<input class="searchSbmFl" name="sfSbm" value="Find" type="submit">
</form>
<ul id="search-results">
<li class="clr">
<a href="http://domain.com/shop/entry1">
<img src="http://domain.com/1.jpg" class="s-img">
<p>Entry title 1</p>
</a>
</li>
<li class="clr">
<a href="http://domain.com/shop/entry2">
<img src="http://domain.com/2.jpg" class="s-img">
<p>Entry title 2</p>
</a>
</li>
</div>
</div>

And looks like this:

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