Question

I need your help on the issue below.

I’m trying to set a Input Hidden value using jQuery AutoComplete function, but the value is not being passed (ui.item.bank_id is undefined).

Javascript code:

$("#reg_bank").autocomplete({  
    //define callback to format results  
    source: function(req, add){  
        //pass request to server  
      $.getJSON("/get_banks.php?callback=?", { q:req.term }, function(data) {  
        //create array for response objects  
        var suggestions = [];  
        //process response  
        $.each(data, function(i, val){  
            suggestions.push(val.bank_name+"("+val.bank_id+")");  
         });  
         //pass array to callback  
         add(suggestions);  
      });  
    },  
    select: function(e, ui) {  
        alert(ui.item.bank_id);
        //$('#reg_bank_id').val(ui.item.bank_id); 
    },   
    change: function() {   
    }  
  }); 

For some reason I can’t figure it out, the ui.item.bank_id is undefined.

My JSON outputs something like that:
[{"bank_id":"341","bank_name":"Ita\u00fa Unibanco S.A."}]

Let me know if you need any additional info..

Thx..

Answer 1

I think you should adjust source function as follow

source: function(req, add){  
    //pass request to server  
  $.getJSON("/get_banks.php?callback=?", { q:req.term }, function(data) {  
    //create array for response objects  
    var suggestions = [];  
    //process response  
    $.each(data, function(i, val){  
        suggestions.push({'label':val.bank_name, 'value':val.bank_id});  
     });  
     //pass array to callback  
     add(suggestions);  
     // now suggestions is arrays of object with 'label' and 'value' properties
  });  
}

and select function as follow

select: function(e, ui) {  
  alert(ui.item.value); // will get bank_id
  alert(ui.item.label); // will get bank_name
}