Autocomplete + Hidden Field in jquery?

Question

I am trying to do an autocomplete that will display something and then put something else in an hidden field on selection.

Example:

In my database I have {[1, 'john'], [2, 'bob'], [3, 'john']}

If the user type 'jo' and clicks on the first 'john', I have no way of knowing on what entry he clicked. So I need some kind of associated hidden field to handle this.

Is there a jquery plugin that does this or do I have to create my own?

I already started and it's working fine with local values, but if I have to get them asynchronously it doesn't work yet. I'm basing mine on this plugin from bassistance. I guess I could get my hands in the code and change the way they handle the responses, but it would save me some time if something was already done !

Answer 1

You can use the result handler and store the desired value on the hidden input.

Answer 2

After a long search the only auto-complete I found the behaves as you described is: Facelist

Answer 3

This code snippet shows how to handle a ajax select on the 'companyname' field, and set the value on the hidden 'companyid' field.

->addOnLoad('$("#companyname").autocomplete(\'./company/companyname/format/html\',options)'.
'.result(
    function(event, data, formatted)
    {
     $("#companyid").val(data[1]);
     //window.alert(formatted);
     //$("#companyname").val(formatted);

    }
);')

But i'm having trouble holding onto the original 'companyname' value when the form submits. The html post the ajax select is

<td>
<input class="ac_input" autocomplete="off" name="companyname" id="companyname" value="" type="text"> 
<input id="companyid" name="companyid" value="161" type="hidden">
</td>

The hidden field is correctly populated, but the companyname is now blank!. Any ideas on how i should replace the second commented-out line?

Answer 4

I know this is old but here is what I do in order to have a hidden field populated with a unique ID that is never displayed and present to the user an autocomplete field that is based on display values:

<script type="text/javascript">
var picklist = [
    { id: "1", value: "One" }, 
    { id: "2", value: "Two" }, 
    { id: "3", value: "Three" }, 
    { id: "4", value: "Four" }
    ];

$().ready(function() {
 $("#pickValue").autocomplete(picklist, {
  minChars: 0,
  max: 12,
  autoFill: true,
  mustMatch: true,
  matchContains: false,
  scrollHeight: 220,
  formatItem: function(row, i, total) {
   return row.value;
  }, 
  formatResult: function(row) {
   return row.value;
  }
 });
 $('input#pickValue').result(function(event, data, formatted) {
  $('#pickID').val( !data ? '' : data.id);
 });
});
</script>

Answer 5

if i want to get hidden field value onclick of button by typing complete word in the textbox and not selecting from the autosuggest list. how to use .result function on button click?