使用jquery ui autocomplete + ajax json数据

时间:2013-08-13 20:20:17

标签: jquery ajax json

我正在尝试使用http://jqueryui.com/autocomplete/#remote-jsonp

我已经接受了代码并尝试对其进行调整。使用原始代码(我可以获得城镇),当我适应我的数据时,它不会(没有列出,没有出现)。我从php文件中获取json数据。这是我的代码:

jquery的:

function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#city" ).autocomplete({

      source: function( request, response ) {
            console.log(request.term);
        $.ajax({
            type: "POST",
          url: "/chercheabo",
          dataType: "jsonp",
          data: {
            achercher: request.term
          },
          success: function( data ) {
            response( $.map( data.myData, function( item ) {
              return {
                label: item.pseuDO + (item.pseuDO ? ", " + item.userID : "") + ", " + item.pseuDO,
                value: item.pseuDO
              }
            }));
          }
        });
      },
      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" );
      }
    });

我的HTML:

<div class="ui-widget">
  <label for="city">Your city: </label>
  <input id="city" />
  Powered by <a href="http://geonames.org">geonames.org</a>
</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>

我的json代码返回:

{"myData":[{"userID":"11","pseuDO":"toto"},{"userID":"20","pseuDO":"blogo"}]}

我的代码中有什么问题吗?... 感谢

更新:从问题中的评论中添加php文件

$options = array(); 
$result = mysqli_query($link,"select userid, pseudo from utili where pseudo like '%".strtolower($_POST[achercher])."%'"); 
while($uti = $result->fetch_object()) 
{ 
    $options['myData'][] = array( 'userID' => $uti->userid, 'pseuDO' => $uti->pseudo ); 
} 
echo json_encode($options);

[edit]:将jsonp改为json,然后就可以了!

0 个答案:

没有答案