select2 showing undefined while value is selected

Question

I am using the select2 plugin, but i am lost it does select2 the chosen value, instead it shows "undefined"

Here is my code, I am using the select box to bring the data from query and also search the data and bring back the json response and fill the data in the select box:

previously i was using a hidden field and it all was working with only exception of showing "undefined to selected value", the time i changed it to select, it is broken..

Here is my code:

<select data-placeholder="Select a city" name="cities" id="cities" data-rel="selectscity">
      </select>

JS Code

$('[data-rel="selectscity"]').select2({
        placeholderOption: 'first',
        minimumInputLength: 2,
        ajax: {
            dataType: "json",
            url: "getcities.cfm",
             data: function (term, page) {
                return {q: term};
            },
            results: function (data) {
                return {results: data};
            }
        },
        formatResult: formatValues,
        nextSearchTerm: displayCurrentValue,
    });

    function displayCurrentValue(selectedObject, currentSearchTerm) {
        return currentSearchTerm;
    }

    function formatValues(data) {
        return data.city + ' - ' + data.state;
    }

Hete is the JSON response i am getting

[{"state":"Alaska","id":622,"city":"Anaktuvuk Pass"},{"state":"Alaska","id":1141,"city":"Atqasuk"},{"state":"Alaska","id":7176,"city":"Douglas"},{"state":"Alaska","id":8783,"city":"False Pass"},{"state":"Alaska","id":13511,"city":"Kasigluk"},{"state":"Alaska","id":13512,"city":"Kasilof"},{"state":"Alaska","id":17831,"city":"Moose Pass"},{"state":"Alaska","id":27034,"city":"Unalaska"},{"state":"Alaska","id":27984,"city":"Wasilla"},{"state":"Alabama","id":205,"city":"Alabaster"},{"state":"Alabama","id":1014,"city":"Ashford"},{"state":"Alabama","id":1020,"city":"Ashland"},{"state":"Alabama","id":1055,"city":"Ashville"},{"state":"Alabama","id":4291,"city":"Castleberry"},{"state":"Alabama","id":7177,"city":"Douglas"},{"state":"Alabama","id":7724,"city":"East Tallassee"},{"state":"Alabama","id":7748,"city":"Eastaboga"},{"state":"Alabama","id":13172,"city":"Jasper"},{"state":"Alabama","id":13487,"city":"Kansas"},{"state":"Alabama","id":18629,"city":"New Castle"},{"state":"Alabama","id":19409,"city":"Notasulga"},{"state":"Alabama","id":21213,"city":"Pleasant Grove"},{"state":"Alabama","id":24547,"city":"Silas"},{"state":"Alabama","id":26111,"city":"Tallassee"},{"state":"Alabama","id":26366,"city":"Thomaston"},{"state":"Alabama","id":26372,"city":"Thomasville"},{"state":"Arkansas","id":884,"city":"Arkansas City"},{"state":"Arkansas","id":994,"city":"Ash Flat"},{"state":"Arkansas","id":1006,"city":"Ashdown"},{"state":"Arkansas","id":1600,"city":"Bassett"},{"state":"Arkansas","id":4215,"city":"Casa"},{"state":"Arkansas","id":4238,"city":"Cash"},{"state":"Arkansas","id":4258,"city":"Casscoe"},{"state":"Arkansas","id":6459,"city":"Damascus"},{"state":"Arkansas","id":7257,"city":"Drasco"},{"state":"Arkansas","id":7369,"city":"Dumas"},{"state":"Arkansas","id":7971,"city":"El Paso"},{"state":"Arkansas","id":9940,"city":"Gassville"},{"state":"Arkansas","id":11615,"city":"Hasty"},{"state":"Arkansas","id":12175,"city":"Hiwasse"},{"state":"Arkansas","id":13173,"city":"Jasper"},{"state":"Arkansas","id":15224,"city":"Little Rock Air Force Base"},{"state":"Arkansas","id":16627,"city":"Mc Caskill"},{"state":"Arkansas","id":18102,"city":"Mount Pleasant"},{"state":"Arkansas","id":18405,"city":"Nashville"},{"state":"Arkansas","id":21214,"city":"Pleasant Grove"},{"state":"Arkansas","id":21232,"city":"Pleasant Plains"},{"state":"Arkansas","id":21295,"city":"Pocahontas"},{"state":"Arkansas","id":26705,"city":"Traskwood"},{"state":"Arkansas","id":27592,"city":"Wabash"},{"state":"Arkansas","id":27597,"city":"Wabbaseka"},{"state":"Arkansas","id":27942,"city":"Washington"},{"state":"Arizona","id":995,"city":"Ash Fork"},{"state":"Arizona","id":3659,"city":"Bylas"},{"state":"Arizona","id":4217,"city":"Casa Grande"},{"state":"Arizona","id":4240,"city":"Cashion"},{"state":"Arizona","id":7178,"city":"Douglas"},{"state":"Arizona","id":9371,"city":"Fort Thomas"},{"state":"Arizona","id":14291,"city":"Lake Havasu City"},{"state":"Arizona","id":23836,"city":"Sasabe"},{"state":"Arizona","id":26604,"city":"Tonto Basin"},{"state":"California","id":510,"city":"Alturas"},{"state":"California","id":950,"city":"Aromas"},{"state":"California","id":1078,"city":"Atascadero"},{"state":"California","id":1599,"city":"Bass Lake"},{"state":"California","id":2639,"city":"Bolinas"},{"state":"California","id":3720,"city":"Calabasas"},{"state":"California","id":4245,"city":"Casmalia"},{"state":"California","id":4248,"city":"Caspar"},{"state":"California","id":4259,"city":"Cassel"},{"state":"California","id":4271,"city":"Castaic"},{"state":"California","id":4280,"city":"Castella"},{"state":"California","id":4301,"city":"Castro Valley"},{"state":"California","id":4302,"city":"Castroville"},{"state":"California","id":7186,"city":"Douglas City"},{"state":"California","id":7187,"city":"Douglas Flat"},{"state":"California","id":7648,"city":"East Irvine"},{"state":"California","id":8331,"city":"Encinitas"},{"state":"California","id":9938,"city":"Gasquet"},{"state":"California","id":10722,"city":"Grass Valley"},{"state":"California","id":11046,"city":"Guasti"},{"state":"California","id":14227,"city":"Lagunitas"},{"state":"California","id":14445,"city":"Lancaster"},{"state":"California","id":16201,"city":"March Air Reserve Base"},{"state":"California","id":17389,"city":"Milpitas"},{"state":"California","id":17548,"city":"Moccasin"},{"state":"California","id":18122,"city":"Mount Shasta"},{"state":"California","id":18185,"city":"Mountain Pass"},{"state":"California","id":18889,"city":"Newcastle"},{"state":"California","id":18958,"city":"Newport Coast"},{"state":"California","id":19010,"city":"Nicasio"},{"state":"California","id":20465,"city":"Pasadena"},{"state":"California","id":20471,"city":"Paskenta"},{"state":"California","id":20472,"city":"Paso Robles"},{"state":"California","id":21215,"city":"Pleasant Grove"},{"state":"California","id":21218,"city":"Pleasant Hill"},{"state":"California","id":21243,"city":"Pleasanton"},{"state":"California","id":21464,"city":"Port Hueneme Cbc Base"},{"state":"California","id":23557,"city":"Salinas"},{"state":"California","id":23614,"city":"San Andreas"}] 

Answer 1

I'm not sure how you have Select2 working with <select> and ajax option. I've tested the code you've pasted and it throws the following javascript error:

Uncaught Error: Option 'ajax' is not allowed for Select2 when attached to a element.

This is resolved if you replace the <select> with an <input type='hidden' ... />

Now, to your undefined issue: Your json object has state, city and id. By default, Select2 expects an id and text.

You've managed to use the correct keys when the options are displayed because you defined formatValues. However you missed the formatSelection, which the documentation states:

Function used to render the current selection.

So, you should redefine this function when Select2 is binded to the input, like this:

$('[data-rel="selectscity"]').select2({
    placeholderOption: 'first',
    minimumInputLength: 2,
    ajax: {
        dataType: "json",
        url: "tags",
        data: function (term, page) {
            return {q: term};
        },
        results: function (data) {
            return {results: data};
        }
    },
    formatResult: formatValues,
    nextSearchTerm: displayCurrentValue,

    // use this function to display the value that you want
    formatSelection: function(object, container) {
        return object.city;
    }
});