2012-05-03 9 views
-1

入力中に提案を表示する入力フィールドを実現しようとしています。私はjqueryオートコンプリート関数を見つけましたが、私はPHPのデータソースとしてXMLに苦労しています。私のPHPファイルは、このような出力を作成します。xmlをデータソースとして出力するPHPでオートコンプリート

XML:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<locations> 
    <location> 
     <number>600</number> 
     <name>Location Name 600</name> 
    </location> 

    <location> 
     <number>698</number> 
     <name>Location Name 698</name> 
    </location> 

    <location> 
     <number>1110</number> 
     <name>Location Name 1110</name> 
    </location> 
</locations> 

私はロリーMcCrossanにより投稿されたリンクでそれを試してみました。

私のHTMLは次のようになります。私は、入力フィールドに何かを書くとき

<!DOCTYPE HTML> 
<head> 
    <title>Autocomplete</title> 
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
     function log(message) { 
      $("<div/>").text(message).prependTo("#output"); 
      $("#output").scrollTop(0); 
     } 

     $.ajax({ 
      url: "api.php", 
      dataType: "xml", 
      success: function(xmlResponse) { 
       var data = $("location", xmlResponse).map(function() { 
        return { 
         name: $("name", this).text(), 
         number: $("number", this).text() 
        }; 
       }).get(); 

       $("#locations").autocomplete({ 
        source: data, 
        minLength: 0, 
        select: function(event, ui) { 
         log(ui.item ? 
          "Selected: " + ui.item.name + ", number: " + ui.item.number : 
          "Nothing selected, input was " + this.value); 
        } 
       }); 
      } 
     }); 
    }); 
    </script> 
</head> 

<body style="background-color: black; color: white;"> 

<input id="locations" /> 

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

</body> 
</html> 

、それそれから明確な、それは私が持っている場所の量である(3李の入力フィールドの下に私を示してい、xmlによると)、テキストは表示されません。何がうまくいかないの?

答えて

0

OK]をクリックして、(JSON出力を作成することにしました)自分のために解決策を見つけました。 Rory McCrossanの例は素晴らしかったですが、私が見ることができたところからxmlを一度ロードしてからxml内を検索しました。私が望んでいたのは、あらかじめフィルタリングされた出力だったので、あまりデータを転送しませんでした。

$(function() { 
     $("#locations").autocomplete({ 
      source: function(request, response) { 
       $.ajax({ 
        url: "api.php", 
        dataType: "jsonp", 
        data: { 
         location: request.term 
        }, 
        success: function(data) { 
         response($.map(data.locations, function(item) { 
          return { 
           label: item.name, 
           value: item.nummer 
          } 
         })); 
        } 
       }); 
      }, 
      minLength: 0, 
      select: function(event, ui) { 
       $("<div/>").text(ui.item.label + " " + ui.item.value).prependTo("#output"); 
      } 
     }) 
    }) 
1

ここでの例を参照してください、オートコンプリートでXMLを使用するには:http://jqueryui.com/demos/autocomplete/xml.html

+0

これはxmlファイルの代わりにurl: "api.php"でも使用できますか? – Ahatius

+0

はい、期待するフォーマットをXMLに明示的に設定するために 'dataType:" xml "の設定を含める限りです。 –

+0

オートコンプリートの方法に問題があります。投稿を開くをご覧ください。 – Ahatius

関連する問題