0

私はこのコードを持っています

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <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/ajax-loader.gif') right center no-repeat;
  }
  #city { width: 25em; }
  </style>
  <script>
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#city" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://localhost/file.php",
          dataType: "jsonp",
          data: {
            featureClass: "P",
            style: "full",
            maxRows: 12,
            name_startsWith: request.term
          },
          success: function( data ) {
            response( $.map( data.geonames, function( item ) {
              return {
                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                value: item.name
              }
            }));
          }
        });
      },
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.label :
          "Nothing selected, input was " + this.value);
      },
      open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
      },
      close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
      }
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="city"></label>
  <input id="city" />
</div>

</body>
</html>

file.php の PHP コード

<?php echo $_GET['name_startsWith']; ?>

ここで、データベースを使用して ajax を介して動的にデータを取得したいと考えています。このコードを実行すると、何の応答も得られず、ajax ローダーの画像が継続的に表示されます。

どうすればそれを機能させることができますか?

ありがとう

4

2 に答える 2

0

まず第一に、あなたが使用してfile.phpいるので、データ型はこのようではないので、dataType: "jsonp" それを使用するには変更を加える必要があります

役立つかどうかはわかりませんが、phpたとえば、このようにjsonでファイルの応答を管理できる場合

    {
    "employees": [
        {
            "firstName": "John",
            "lastName": "Doe"
        },
        {
            "firstName": "Anna",
            "lastName": "Smith"
        },
        {
            "firstName": "Peter",
            "lastName": "Jones"
        }
    ]
}

その後、このように使用できます

  var data_of_ajax = $.ajax({
        type: 'POST',       
        url: "http://localhost/file.php",
        data: {
        featureClass: "P",
        style: "full",
        maxRows: 12,
        name_startsWith: request.term
        },
        dataType: 'html',
        context: document.body,
        global: false,
        async:false,
        success: function(data) {
            //alert(data);
            return data;
        }
    }).responseText;
    data_of_ajax = $.parseJSON(data_of_ajax);

今、あなたは変数でjsonを取得しますdata_of_ajax

オートコンプリートで使用できます

$( "#city" ).autocomplete({
  source: data_of_ajax,
  minLength: 2,
  // your code
});
于 2013-05-23T07:05:34.530 に答える