Controlling the display of selected item using jQueryUI Autocomplete widget

Question

I'm using the jQueryUI autocomplete widget to get data from a JSON web service. Its very similar to the example below:

<script>
$(function() {
    $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.id
                        }
                    }));
                }
            });
        },
        minLength: 2
    });
});
</script>

My question is how can I control what is put into the input box (#city) when something is selected from the list. At the moment the autocomplete works well and will give a list of labels. However when you select one of the list items it puts the value into the input. In this case its an id that i want to use but I want the input to display the label data rather than the value data.

Victor · Accepted Answer · 2011-02-17 23:42:36Z

Well you would have to make the value the same as the label. In your case it would look like this:

success: function( data ) {
   response( $.map( data.geonames, function( item ) {
      return {
         label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
         value: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
      }

   }));
}

My guess is that you need the value for other purposes. I have had the same situation, and depending on your requirements there are a couple of options.

You could have a hidden field, in which you can store the value when an options is selected.

This is how it would look:

$(function() {
    $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.id,
                            source: item
                        }
                    }));
                }
            });
        },
        minLength: 2,
        change: function(event, ui) {
           if (ui.item) {
              $('#your_hidden_input').val(ui.item.source.id);
              $(this).val(ui.item.value);
           }
        }
    });
});

Random Someone · Accepted Answer · 2016-04-19 06:01:19Z

0

If you are using jQueryUI autocomplete widget, then in the select option of the widget, you can do the following :

select: event.preventDefault();
         $("#city").val(ui.item.label);

This will insert the particular item's label data in the input field on select event.

answered Apr 19, 2016 at 6:01

Random Someone

3921 gold badge7 silver badges22 bronze badges

Collectives™ on Stack Overflow

Controlling the display of selected item using jQueryUI Autocomplete widget

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related