Question

I have a standard jQuery autocomplete setup similar to the below:

$("input#autocomplete").autocomplete({
    source: source,
    minLength: 5 ,
    select: function( event, ui ) {
         alert(ui.item.value);
    }
});

What I would like is, when the value is chosen, a data-table within the page appears and get populated with data from a database using the value as a search parameter.

So for instance if I select “RED“, the table would then show and display data from a query such as SELECT * FROM TABLE WHERE COLUMN='RED'

The query is simplified but can anyone please point me in the right direction?

Answer 1

For this purpose you should request a kind of search page which will act as JSON endpoint for e.g.

$("input#autocomplete").autocomplete({
    source: source,
    minLength: 5 ,
    select: function( event, ui ) {

      var _value = ui.item.value;

      $.post('services/populate_table.php', // endpoint URL
             { someParameterToTransmit: _value  }, // some data to transmit
             function(data) { // on complete handler
               $('.result').html(data); // populate retrieved data in any form you need
             } // on complete function
      ); // post
    } // on select (autocomplete)
}); // autocomplete

Data from endpoint also can be retrieved as JSON.

You can read documentation for more information about request method.