Can not select any item from Select2

Question

I'm using Select2 with customFormatResult as this code show:

function productFormatResult(product) {
    var markup = '<div class="row-fluid">' +
            '<div class="col-xs-2"><img src="' + product.url + '" /></div>' +
            '<div class="col-xs-10">' + product.value + '</div>' +
            '</div>';
    var prueba = '<img style="height: 40px;width: 40px;" src="' +
            product.url + '" class="img-rounded" id="ProductoForm_0_image" />&nbsp;&nbsp;' + product.value;

    return prueba;
}

function productFormatSelection(product) {
    return product.value;
}

$("input.typeahead").select2({
    placeholder: "Buscar producto",
    minimumInputLength: 0,
    ajax: {
        url: Routing.generate('get_products'),
        dataType: 'json',
        quietMillis: 250,
        data: function(term, page) {
            return {
                filter: term,
                page: page
            };
        },
        results: function(data, page) {
            var more = (page * 30) < data.total_count;
            return {results: data.items, more: more};
        }
    },
    formatResult: productFormatResult,
    formatSelection: productFormatSelection,
    escapeMarkup: function(m) {
        return m;
    },
    formatNoResults: function() {
        return "No se encontraron productos para la palabra actual";
    },
    formatAjaxError: function() {
        return "No hay conexión con el servidor";
    }
});

But I can choose/select any item from select when they are showed, why? What's wrong in my code? You can test live example here (look for this text OFERTAS REALIZADAS A FACTURAR: where says Producto )

Answer 1

You need return id.

$("input.typeahead").select2({
    id: function(prod) { return prod.value; },
    placeholder: "Buscar producto",
    minimumInputLength: 0,
    id: function(prod){ return "prod"; },
    ajax: {
        url: Routing.generate('get_products'),
        dataType: 'json',
        quietMillis: 250,
        data: function(term, page) {
            return {
                filter: term,
                page: page
            };
        },
        results: function(data, page) {
            var more = (page * 30) < data.total_count;
            return {results: data.items, more: more};
        }
    },
    formatResult: productFormatResult,
    formatSelection: productFormatSelection,
    escapeMarkup: function(m) {
        return m;
    },
    formatNoResults: function() {
        return "No se encontraron productos para la palabra actual";
    },
    formatAjaxError: function() {
        return "No hay conexión con el servidor";
    }
});