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 !

Christian C. Salvadó · Accepted Answer · 2009-07-30 17:54:45Z

3

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

answered Jul 30, 2009 at 17:54

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aaron Rouse · Accepted Answer · 2010-01-15 22:02:45Z

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>

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 30, 2009 at 17:55

CD..

74.4k25 gold badges160 silver badges170 bronze badges

Comments

Ivailo Bardarov · Accepted Answer · 2011-03-07 11:13:37Z

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>

Collectives™ on Stack Overflow

Autocomplete + Hidden Field in jquery?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related