Using jquery ui autocomplete + ajax json data -
i'm trying use http://jqueryui.com/autocomplete/#remote-jsonp
i've taken code , tried adapt it. orginal code works (i can towns), , when adapt data, doesn't (nothing listed, nothing appears). json data php file. here code:
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 " + this.value); }, open: function() { $( ).removeclass( "ui-corner-all" ).addclass( "ui-corner-top" ); }, close: function() { $( ).removeclass( "ui-corner-top" ).addclass( "ui-corner-all" ); } });
my html:
<div class="ui-widget"> <label for="city">your city: </label> <input id="city" /> powered <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>
my json code return:
{"mydata":[{"userid":"11","pseudo":"toto"},{"userid":"20","pseudo":"blogo"}]}
can see wrong in code?... thanks
update: adding php file comments in question
$options = array(); $result = mysqli_query($link,"select userid, pseudo utili pseudo '%".strtolower($_post[achercher])."%'"); while($uti = $result->fetch_object()) { $options['mydata'][] = array( 'userid' => $uti->userid, 'pseudo' => $uti->pseudo ); } echo json_encode($options);
[edit]: change jsonp json works!
Comments
Post a Comment