Get specific XML entries with multiple search queries

Question

I didn't know how to search for my actual problem getting data from XML for a jQTouch app, so I hope you can help me with it.

Here are the code parts that are working -- in that the correct sum of entries with the keyword in the title are found.

But, the vars aren't shown. So how do I get the other search query fields into the game?

My XML Base

<?xml version="1.0" encoding="UTF-8"?>
<programm>
<kurs nr="11165010">
    <nr>11165010</nr>
    <bereich>Bereich 1</bereich>
    <titel>abc</titel>
    <text>Text 1</text>
    <bezirk>Bezirk 1</bezirk>
</kurs>
<kurs nr="11201061">
    <nr>11201061</nr>
    <bereich>Bereich 2</bereich>
    <titel>Xyz</titel>
    <text>Text 2</text>
    <bezirk>Bezirk 2</bezirk>
</kurs>
...
</programm>

My HTML

<div id="kurs_suche">
    <div class="toolbar">
        <h1>Kursprogramm</h1>
        <a href="#home" class="button back"><img alt="home" src="thumbs/home.png" align="absmiddle"/></a>
    </div>
    <form id="search">
        <ul class="rounded">
            <li id="notice">Detail-Kurssuche:</li>
            <li><input name="suche_text" type="text" id="suche_text" placeholder="Suchwort(e)" autofocus/></li>
            <li>
            <select name="suche_bereich" id="suche_bereich">
                <option value="0" selected='selected'>Bereich (optional)</option>
                <option value='Bereich 1'>Bereich 1</option>
                <option value='Bereich 2'>Bereich 2</option>
            </select>
            </li>
            <li>
            <select name="suche_bezirk" id="suche_bezirk">
                <option value="0" selected='selected'>Bezirk (optional)</option>
                <option value='Bezirk 1'>Bezirk 1</option>
                <option value='Bezirk 2'>Bezirk 2</option>
            </select>
            </li>
        </ul>
        <a href="#" class="whiteButton submit">Kurs(e) finden</a>
    </form>
</div>
<!-- KURSE SUCHERGEBNIS -->
<div id="kurs_liste">
    <div class="toolbar">
        <h1>Suchergebnis</h1>
        <a href="#home" class="button back">zur&uuml;ck</a>
    </div>
    <div id="kurs_liste_ausgabe">
        <ul class="rounded" id="kurse">
            <li>Kurse werden geladen ...</li>
        </ul>
    </div>
</div>
<!-- KURS ANSICHT -->
<div id="kurs_detail">
    <div class="toolbar">
        <h1>Kurs Details</h1>
        <a href="#home" class="button back">zur&uuml;ck</a>
    </div>
    <div id="kurs_details">
        <p>
            Kurs wird geladen ...
        </p>
    </div>
</div>

My jQuery:

$(document).ready(function () {

$('#search').submit(function () {
    //grab the notice div so we can manipulate it
    var notice = $('#notice');
    //grab the notice instructions so we can reset
    var noticetxt = notice.html();
    //set notice to searching...
    notice.empty().append('Kurse werden gesucht, bitte warten ...');
    //get the keywords
    var stext = $('#suche_text').val();
    var sbereich = $('#suche_bereich option:selected').val();
    var sbezirk = $('#suche_bezirk option:selected').val();
    $.ajax({
        type: "GET",
        url: "kursprogramm.xml",
        dataType: "xml",
        success: function (data) {
            parseXML(data);
            jQT.goTo('#kurs_liste', 'slideleft');
        }
    });

    function parseXML(data) {
        var pub = "";
        $(data).find('kurs').find("titel:contains('" + stext + "')").each(function () {
            var knr = $(this).find('nr').text();
            var ktitel = $(this).find('titel').text();
            var kbereich = $(this).find('bereich').text();
            var kbezirk = $(this).find('bezirk').text();
            var kvdat = $(this).find('vondatum').text();
            pub += '<li class=\"arrow\"><a href=\"#kurs_detail\" class=\"KursLink slideleft\" id=\"' + knr + '\">' + ktitel + '<br />' + kbezirk + ', ' + kvdat + '</a></li>' + '\n';
        });
        $('#kurse').html(pub);
    }
});

});

Answer 1

Clarified Requirements:

1. Search by any combination of bezirk, bereich, titel text.

The code, below is updated to not require a search string.

~~~
First, beware that contains() is case-sensitive! your users may not appreciate that. ;)

Consider extending jQuery like so:

//--- Extend jQuery with a case-insensitive version of contains().
jQuery.extend (
    jQuery.expr[':'].containsCI = function (a, i, m) {
        var sText   = (a.textContent || a.innerText || "");//-- faster than jQuery(a).text()
        var zRegExp = new RegExp (m[3], 'i');

        //Pro tip.  This allows search on regular expressions, too!
        return zRegExp.test (sText);
    }
);

Then code like this should work:
See it in action at jsFiddle.

var srchResults;

//--- Are we searching for text?
if (stext == 0  ||  /^\s*$/.test (stext) ) {
    //--- No text search was given.  Case-sensitive is fine, here.
    srchResults = $("kurs", data).find ("bereich:contains('" + sbereich + "'), bezirk:contains('" + sbezirk + "')")
} else {
    //--- text search.  The select boxes will also be filtered, below.
    srchResults = $("kurs", data).find ("titel:containsCI('" + stext + "')")
}

var pub = "";
srchResults.parent ().each (function () {
    //--- "this" is one of the <kurs> nodes that matches the search string.
    var childVals   = {};

    //--- Capture the value of each child node. Note that structure is single-depth.
    $(this).children ().each ( function () {
        //-- Note that nodeName is always returned in all uppercase.
        childVals [this.nodeName]   = $(this).text ();
    } );

    //--- Are we filtering on selectors?
    if (sbezirk  != 0  &&  sbezirk  != childVals.BEZIRK)     return;
    if (sbereich != 0  &&  sbereich != childVals.BEREICH)    return;

    //--- Build the HTML nodes.
    //Note that vondatum is not in the data!
    pub    += '<li class="arrow">'
            +   '<a href="#kurs_detail" class="KursLink slideleft" id="' + childVals.NR + '">'
            +       childVals.TITEL + '<br />' + childVals.BEZIRK + ', ' + childVals.BEREICH
            +   '</a>'
            + '</li>\n';
} );
$('#kurse').html (pub);