CODEWITHSUNDEEP
jqueryajaxuser-interfacecomboboxautocomplete
andre.barata
andre.barata

Reputation: 663

JQuery UI autocomplete combobox selecting value instead of name

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?

Upvotes: 0

Views: 787

Answers (1)

tordo256
tordo256

Reputation: 125

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);

Upvotes: 1

Related Questions