获取具有多个搜索查询的特定XML条目

时间:2011-07-27 10:05:46

标签: jquery xml search jqtouch

我不知道如何搜索从jQTouch应用程序的XML获取数据的实际问题,所以我希望你能帮助我。

以下是正常工作的代码部分 - 找到标题中带有关键字的正确条目总和。

但是,没有显示变量。 那么如何将其他搜索查询字段添加到游戏中呢?

我的XML基础

<?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>

我的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>

我的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);
    }
});

});

1 个答案:

答案 0 :(得分:0)

澄清要求:

  1. 按bezirk,bereich,titel text的任意组合搜索。
  2. 以下代码更新为不需要搜索字符串。

    ~~~
    首先,请注意contains()区分大小写!您的用户可能不会那么欣赏。 ;)

    考虑像这样扩展jQuery:

    //--- 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);
        }
    );
    


    然后像这样的代码应该工作:
    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);