我正在尝试使用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);
[编辑]:将 jsonp 更改为 json 就可以了!