0

jQueryを使用して複数のXMLノードを解析し、結果を1つとして出力することは可能ですか?

たとえば、 http://jqueryui.com/autocomplete/#xmlの例では、name ノードと countryName ノードのみを解析しますが、残り (geonameId、lng、lat、countryCode) を解析して、必要に応じて出力したいと考えています。 .

jQuery 

 $.ajax({
        url: "london.xml",
        dataType: "xml",
        success: function (xmlResponse) {
            var data = $("geoname", xmlResponse).map(function () {
                return {
                    value: $("name", this).text() + ", " + ($.trim($("countryName", this).text()) || "(unknown country)"),
                    id: $("geonameId", this).text()
                };
            }).get();
            $("#match").autocomplete({
                source: data,
                minLength: 0,
                select: function (event, ui) {
                    log(ui.item ?
                        "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
                        "Nothing selected, input was " + this.value);
                }
            });
        }
    });

XML

<geonames>
  <geoname>
    <name>London</name>
    <lat>51.5084152563931</lat>
    <lng>-0.125532746315002</lng>
    <geonameId>2643743</geonameId>
    <countryCode>GB</countryCode>
    <countryName>United Kingdom</countryName>
    <fcl>P</fcl>
    <fcode>PPLC</fcode>
  </geoname>
  <geoname>
    <name>London</name>
    <lat>42.983389283</lat>
    <lng>-81.233042387</lng>
    <geonameId>6058560</geonameId>
    <countryCode>CA</countryCode>
    <countryName>Canada</countryName>
    <fcl>P</fcl>
    <fcode>PPL</fcode>
  </geoname>
  <geoname>
    <name>East London</name>
    <lat>-33.0152850934643</lat>
    <lng>27.9116249084473</lng>
    <geonameId>1006984</geonameId>
    <countryCode>ZA</countryCode>
    <countryName>South Africa</countryName>
    <fcl>P</fcl>
    <fcode>PPL</fcode>
  </geoname>
</geonames>
4

1 に答える 1

3

はい、lang、lat、およびその他の xml を作成できます。

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - XML data parsed once</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
  </style>
  <script>
  $(function() {
    function log( message ) {
      $( "<div/>" ).text( message ).prependTo( "#log" );
      $( "#log" ).attr( "scrollTop", 0 );
    }

    $.ajax({
      url: "london.xml",
      dataType: "xml",
      success: function( xmlResponse ) {
        var data = $( "geoname", xmlResponse ).map(function() {
          return {
            value: $( "name", this ).text() + ", " +
              ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
            id: $( "geonameId", this ).text(),
            lat:$( "lat", this ).text(),
            lng:$( "lng", this ).text()
          };
        }).get();
        $( "#birds" ).autocomplete({
          source: data,
          minLength: 0,
          select: function( event, ui ) {
            log( ui.item ?
              "Selected: " + ui.item.value + ", geonameId: " + ui.item.id+", lat: "+ ui.item.lat + ui.item.id+", lang: "+ ui.item.lng :
              "Nothing selected, input was " + this.value );
          }
        });
      }
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="birds">London matches: </label>
  <input id="birds" />
</div>

<div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


</body>
</html>
于 2013-10-20T12:13:48.930 に答える