JQuery UI autocomplete combobox selecting value instead of name

Question

I need a combobox (id / name) pair, where the user selects an item, and the id is sent to the server. at the same time the combobox calls a ajax webservice to select with autocomplete

I have an almost working example, in this JSFiddle

Here is the AJAX part:

source: function(request, response) {
                $.ajax({
                    url: "http://ws.geonames.org/searchJSON",
                    type: "POST",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        username: "andrebarata",
                        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.geonameId
                            }
                        }));
                    }
                })
            },

the only problem is that when i select a value it is changing the value to the ID instead of the name.

What should i do to change this?

I'm wondering if the solution could be storing a (name/value) pair in each of the autocomplete items, and then retreiving the one i need — andre.barata
– andre.barata, Commented Oct 28, 2014 at 13:28

tordo256 · Accepted Answer · 2014-10-31 14:24:26Z

1

If I change "value: item.geonameId" by "value: item.name" it's working ...

and to get the id add a new attribute "geoid" like this :

success: function(data) {
                        response($.map(data.geonames, function(item) {
                            return {
                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.name,
                                geoid: item.geonameId
                            }
                        }));
                    }
                })
            },
            select: function(event, ui) {
                alert(ui.item.value+" , "+ ui.item.geoid);

edited Oct 31, 2014 at 14:24

answered Oct 28, 2014 at 13:20

tordo256

1251 silver badge7 bronze badges

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

3 Comments

andre.barata Over a year ago

Yes, but the ID is lost, as you can see in the popup message.

andre.barata Over a year ago

i think the autocomplete widget only stores a simple list, not a (name/value) pair list

tordo256 Over a year ago

Ok but you can do it by add a new attribute like geoid and put your id data in it. So you have this : "..value: item.name, geoid:item.geonameId ..." and in the alert message : "ui.item.value+" , "+ ui.item.geoid"

Collectives™ on Stack Overflow

JQuery UI autocomplete combobox selecting value instead of name

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related