Databases
StackOverflow2013
Postsdbo
POUsing jquery ui autocomplete + ajax json data
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing jquery ui autocomplete + ajax json data
    primarykey
    data
    text
    <p>I'm trying to use <a href="http://jqueryui.com/autocomplete/#remote-jsonp" rel="nofollow">http://jqueryui.com/autocomplete/#remote-jsonp</a></p> <p>I've taken the code and tried to adapt it. With the orginal code it works (I can get the towns), and when I adapt to my data, it doesn't (nothing is listed, nothing appears). I get json data from a php file. Here is my code:</p> <p>jquery:</p> <pre><code>function log( message ) { $( "&lt;div&gt;" ).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" ); } }); </code></pre> <p>My html:</p> <pre><code>&lt;div class="ui-widget"&gt; &lt;label for="city"&gt;Your city: &lt;/label&gt; &lt;input id="city" /&gt; Powered by &lt;a href="http://geonames.org"&gt;geonames.org&lt;/a&gt; &lt;/div&gt; &lt;div class="ui-widget" style="margin-top: 2em; font-family: Arial;"&gt; Result: &lt;div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>My json code return:</p> <pre><code>{"myData":[{"userID":"11","pseuDO":"toto"},{"userID":"20","pseuDO":"blogo"}]} </code></pre> <p>Can you see anything wrong in my code?... Thanks</p> <p><strong>UPDATE: Adding the php file from comments in the question</strong></p> <pre><code>$options = array(); $result = mysqli_query($link,"select userid, pseudo from utili where pseudo like '%".strtolower($_POST[achercher])."%'"); while($uti = $result-&gt;fetch_object()) { $options['myData'][] = array( 'userID' =&gt; $uti-&gt;userid, 'pseuDO' =&gt; $uti-&gt;pseudo ); } echo json_encode($options); </code></pre> <p>[edit]: change jsonp to json then it works!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser2670167
    1. USuser2670167
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POUsing jquery ui autocomplete + ajax json data
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COWhat exactly do you mean by doesn't work? Please describe exactly what problem you are facing or error you get.
      singulars
      1. POUsing jquery ui autocomplete + ajax json data
      1. USShaunak
    2. COIt simply don't list anything... Nothing happens and no error in console...
      singulars
      1. POUsing jquery ui autocomplete + ajax json data
      1. USuser2670167
    3. COokay using developer tools, check to see if you request is going through, If it is please post what response you get. Also add a error:function(data){console.log(data)} callback after success and see what you get.
      singulars
      1. POUsing jquery ui autocomplete + ajax json data
      1. USShaunak
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload