How to properly implement a form that is using the jQuery UI autocomplete widget?

Question

I am using Ruby on Rails 3.2.2 and the jquery-rails 2.1.3 (including jQuery UI). I am trying to implement a HTML form so to search, select and submit city data by using the Autocomplete jQuery UI widget.

At this time I am implementing my form with the following "autocompletable" field:

<div class="ui-widget">
  <label for="cities">City: </label>
  <input id="cities" />
</div>

<script>
  $jQ(function() {
    var cache = {};
    $jQ( "#cities" ).autocomplete({
      autoFocus: true,
      minLength: 3,
      source:    function( request, response ) {
        $jQ.ajax({
            url:      '<SEARCH_PATH>',
            data:     { search: request.term },
            dataType: 'json',
            success:  function(data) {
              var cities = new Array();

              $jQ.each(data, function(arrayID, city) {
                cities.push({ label: city.name, value: city.id })
              });

              response( cities ); 
            },
            error:    function () {
              response([]);
            }
        });
      }
    });
  });
</script>

The above code works as expected for retrieving JSON data and displaying the list of retrieved cities. As you can see, the "useful part" of city data is the id of the city since I am using the id value in order to handle internally the submitted data. However, given the "selectable" list of cities is displayed, when I use keyboard UP and DOWN arrows in order to select one of those cities then the input field is populated with the city id (not with the city name).

I would like to:

display the city name instead of the id in the input field on selecting the city;
find a way in order to submit the city id and not the city name (even if the city name is the only thing displayed in the front end content).

How could / should I make to properly accomplish that?

It's not absolutely clear, but it sounds almost as-if you want the default functionality of the autocomplete. — user400654
– user400654, Commented Nov 5, 2012 at 15:37
@Kevin B - I don't think so since, for instance, the default functionality related to the select event of the Autocomplete widget "is to replace the text field's value with the value of the selected item". In this case, as I wrote in the question, I would like to display the city name (the label) instead of the id (the value) in the input field on selecting the city. — user12882
– user12882, Commented Nov 5, 2012 at 15:40
It seems to be working for me, at this fiddle, type f and choose foo, and bar appears in the input. jsfiddle.net/f8yPX — user400654
– user400654, Commented Nov 5, 2012 at 15:45
@Kevin B - Your linked code is not what I am looking for. However, considering your case, I would like still to display the foo label (on selecting foo) but submit the bar value when I submit the related form. — user12882
– user12882, Commented Nov 5, 2012 at 15:49
On select, populate a hidden input with your desired value and submit that hidden input rather than the autocomplete. — user400654
– user400654, Commented Nov 5, 2012 at 15:50

user400654 · Accepted Answer · 2012-11-05 16:06:00Z

2

Use the select event to populate a hidden field, then submit the hidden field instead.

<div class="ui-widget">
  <label for="cities">City: </label>
  <input id="cities" />
  <input name="cities" type="hidden" id="cities-hidden" />
</div>

js

$jQ(function() {
  var cache = {};
  $jQ( "#cities" ).autocomplete({
    autoFocus: true,
    ...
    select: function(e, ui) {
      $("#cities-hidden").val(ui.item.value); // populate hidden input
      $("#cities").val(ui.item.label); // populate autocomplete input
      return false; // prevent default action of populating autocomplete input with value
    }
  });
});

Demo: http://jsfiddle.net/f8yPX/3/

edited Nov 5, 2012 at 16:06

answered Nov 5, 2012 at 16:00

user400654

95.1k16 gold badges168 silver badges188 bronze badges

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

10 Comments

user400654 Over a year ago

What's up with the syntax highlighter today?

user12882 Over a year ago

Your code seems to work, but what do you mean with "What's up with the syntax highlighter today"?

user400654 Over a year ago

It's highlighting the code incorrectly for some reason, even though the code is syntactically valid. Not related to the question.

user12882 Over a year ago

There is a subtle (visible) issue on selecting a value: when you use UP / DOWN keyboard arrows in the autocompletable field it is displayed the value of the selected item until I don't select definitively the item. It should always be displayed the label (not the value). The is, the end user should never see the value.

user12882 Over a year ago

Sorry, but I still don't understand what you are referring to when you say "it's highlighting the code incorrectly for some reason, even though the code is syntactically valid".

|

Collectives™ on Stack Overflow

How to properly implement a form that is using the jQuery UI autocomplete widget?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related