Question

我有多个包含电视列表的XML文件，每个文件都是一个电视频道。我希望能够按程序标题搜索并在html表中显示结果。到目前为止，我已经能够通过一个XML文件进行搜索 - 所以通过一个通道进行搜索。我希望能够通过输入框和搜索按钮使用用户输入来搜索多个频道。我看起来像这样的XML：

<?xml version="1.0" encoding="UTF-8"?>

<channel id="sky_one" source="Sky" date="25/11/2014">
  <programme>
<desc>Tony's motorcycle bursts into flames between his legs while town planner Liz is left in agony after her half-tonne horse bolts and lands on top of her. Also in HD</desc>
<title>The Real A &amp; E</title>
<end>0630</end>
<start>0600</start>
  </programme>

（只是一个片段）

到目前为止，我使用的jQuery适用于一个频道，如下所示：

$(document).ready(function () {

  //GLOBAL VAR
  var keyword = '';
  var pub = ''; 

  var i = 0;

  $("#searchButton").click(function () {
    keyword = $("input#term").val();

    //Reset any message
    var errMsg = '';
    pub = '';

    if (keyword == '') {
      errMsg += 'Please enter a search term';
    } else {
      searchThis();
    }

    if (errMsg != '') {
      pub += '<div class="error">';
      pub += errMsg;
      pub += '</div>';
    }

    //Show error
    $('#result').html(pub);

  });

// ----------------------------------------- SKY NEWS -----------------------------------------------------------

  function searchThis() {
    $.ajax({
      type: "GET",
      url: "https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_one.xml",
      dataType: "xml",
      success: function (xml) {
        loadPublication(xml)
      }
    });
  }

  function loadPublication(xmlData) {
    i = 0;
    var row;

    var searchExp = "";

    $(xmlData).find('programme').each(function () {

      var title = $(this).find('title').text();
      var desc = $(this).find('desc').text();
      var start = $(this).find('start').text();

      //Format the keyword expression
      var exp = new RegExp(keyword, "gi");

      //Match to Title of programme
      searchExp = title.match(exp);

      if (searchExp != null) {

        //Start building the result
        if ((i % 2) == 0) {
          row = 'even';
        } else {
          row = 'odd';
        }

        i++;

        pub += '<tr class="row ' + row + '">';
        pub += '<td valign="top" class="col1">' + title + '</td>';
        pub += '<td valign="top" class="col2">' + desc + '</td>';
        pub += '<td valign="top" class="col3">' + start + '</td>';
        pub += '</tr>' + 'n';
      }
    });

    if (i == 0) {
      pub += '<div class="error">';
      pub += 'No Result was Found';
      pub += '</div>' + 'n';

      //Populate the result
      $('#result').html(pub);
    } else {
      //Pass the result set
      showResult(pub);
    }
  }

  function showResult(resultSet) {

    //Show the result
    pub = '<div class="message">There are ' + i + ' results!</div>';
    pub += '<table id="grid" class="table-bordered">';
    pub += '<thead><tr>' + 'n';
    pub += '<th class="col1"> </th>';
    pub += '<th class="col2">Title</th>';
    pub += '<th class="col3">Desc</th>';
    pub += '<th class="col4">Start</th>';
    pub += '</tr></thead>';
    pub += '<tbody>';

    pub += resultSet;

    pub += '<hr class="horule" />';
    pub += '</tbody>';
    pub += '</table>';

    //Populate
    $('#result').html(pub)

  }
});

html如下：

<input type="text" id="term" placeholder="Search by program title..."></div>
</div>
<input type="button" id="searchButton" value="Search" class="btn btn-primary" />
<div id="result"> </div>

我有一个想法是使用xml文件作为变量，然后使用.when和.then来使用xml文件，虽然我不太清楚如何实现这些，如：

 // Open the xml file
        var sky1 = 'https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_one.xml',
            bbc1 = 'https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/bbc1.xml',
            skyn = 'https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_news.xml';
        $.when(
            $.ajax( sky1 ),
            $.ajax( bbc1 ),
            $.ajax( skyn )
        ).then(function( skyone, bbcone, skynews ) {
            var sky1p = $(skyone).find('programme'),
                bbc1p = $(bbcone).find('programme'),
                skynp = $(skynews).find('programme');
//sky one
            sky1p.each(function() {
//DO Search

//sky one
            skynp.each(function() {
//DO Search
//sky one
            bbcp.each(function() {
//DO Search

预期输出是一个带有标题，描述和程序时间的html表。如果有人能提供帮助那就太棒了！

使用jQuery搜索XML并显示结果

0 个答案: