jquery load-method: custom ajax search based on sitemap?

hey guys, i have a sitemap with h3's and ul's like this:

<div id="ajax-base">
<h3>Sites</h3>
<ul>
    <li>Site one</li>
    <li>Site two</li>
    <li&g开发者_JS百科t;Site three</li>
</ul>
<h3>Posts</h3>
<?php $first = 0;?>
    <ul>
        <li>Post one</li>
        <li>Post two</li>
        <li>Post three</li>
    </ul>
<h3>Categories</h3>
<ul>
    <li>Category one</li>
    <li>Category two</li>
</ul>
</div>

When typing in a searchfield on my website i want to load MATCHED LIST-ELEMENTS from this sitemap-page.

var $sr = $('#searchresults');
$('.searchfield').keydown(function() {
        $sr.load("/sitemap/" + " #ajax-base", function() {

        });
    });

Currently i'm successfully loading the entire sitemap #ajax-base div (that you can see on top) into the #searchresults div where the loaded content is supposed to go.

However i have no idea how i can match any list-item from this sitemap list. So i don't want to be able to find "Sites" (the h3 element" but i want to find "Site one" when i type "one".

any idea how i can do that? thank you

what i would do is put one class in the < li > tag like < li class="to_match" > and them use:

  $(".to_match").each(function() {
        //do stuff with the li, like :
        var text = $(this).val();       
        alert(text);        
        });

not sure if is the best way but it should work !