CODEWITHSUNDEEP
phpjqueryautocomplete
spelltox
spelltox

Reputation: 62

Get additional data from php that is called as 'source' for JQuery 'autocomplete'

I've implemented JQuery's 'autocomplete widget to get values from a PHP file :

HTML:

<input id="product_name_1" type="text" value=""/>
<input id="quantity_1"     type="text" value=""/>
<input id="unit_price_1"   type="text" value=""/>

<input id="product_name_2" type="text" value=""/>
<input id="quantity_2"     type="text" value=""/>
<input id="unit_price_2"   type="text" value=""/>

....

JQuery:

jQuery(document).ready(function(){
    $('input[id^="product_name"]').autocomplete({source:'suggest_product_name_jquery.php', minLength:2});
    });

PHP :

$data[] = array(
    'label' => $row['product_name_hebrew'] .' (USD $'. $row['supplier_usd_price'] .')',
    'value' => $row['product_name_hebrew'],
);

echo json_encode($data);

This code auto-completes all the "product_name_x" fields just fine.

What i need is a way to change data in the adjacent fields (quantity_x, unit_price_x) according to the selected auto-complete value of "product_name_x".

I know i can run another query after 'change' is triggered on this field... But the best thing is if i could get that extra data from the PHP file and assign it to the adjacent fields (quantity_x, unit_price_x) once 'autocomplete' is done.

After 2 hours of looking for a solution- any idea would be great :-) Many thanks !

Upvotes: 0

Views: 195

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

Assuming your autocomplete request returns the required field values then you can use the select event to achieve this

Ex: In this demo the response is in the following format

{
  "label": "One",
  "value": 1,
  "type": "v",
  "raw": "p"
}

Then

  $('#combo').autocomplete({
    source:'data.json',
    minLength:2,
    select: function(e, ui){
      $('#type').val(ui.item.type);
      $('#raw').val(ui.item.raw);
    }
  });

Demo: Plunker

Upvotes: 1

Related Questions