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

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 3

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

Answer 4

Probably this would help The trick is to return false after the select event. This would close the select dropdown and your changes to the hidden/textbox will stay visible.

 <script type="text/javascript">
      $(document).ready(function(){
        $("#user_autocomplete").autocomplete({
          source: "http://localhost:3000/admin/users/emails_autocomplete",
          minLength: 3,
          delay: 1,
          select: function( event, ui ) {
            if (ui.item) {
              console.log("Selected: " + ui.item.value + " aka " + ui.item.label);
              $("#user_autocomplete").val(ui.item.label);
              $('#search_user_id_equals').val(ui.item.value);
            } else {
              // "Nothing selected, input was " + this.value );
            }
            return false;
          }
        });
      });

...........

<input class="hidden" id="search_user_id_equals" name="search[user_id_equals]" type="hidden" />

<div class="input select optional">
  <label for="user_autocomplete">User email</label>
  <input id="user_autocomplete" type="text" index="" class="ui-autocomplete-input string"
         autocomplete="off" role="textbox"
         aria-autocomplete="list" aria-haspopup="true"
         value=""
         />
</div>