Select2 on asp.net server controls?

Question

I'm trying for some time to use Select2 in my projects but I can't make it to work as I want. I develop asp.net webforms apps, so what I need is to be able to pick the selection result at code behind after a post. The problem is that whatever I do I always get my textboxes text fill with something like "[object OBJECT]" instead of the text being shown at the page. I guess that I'm not giving the control the apropiate data format, but I can't find the problem.

That is currently throwing me away from using it. So I only need a little omph to start with select2.

My example code is:

<script>
    $(document).ready(function () {
        $("#<%=Codigo.ClientID%>").select2({
            minimumInputLength: 3,
            quietMillis: 2000,
            ajax: {
                url: '<%=ResolveUrl("~/api/Search/Customers")%>',
                dataType: 'json',
                data: function (term, page) {
                    return {
                        "$filter": "substringof(tolower('" + term + "'), tolower(Name))",
                        page_limit: 10
                        //"$skip": page * 10,
                        //"$top": 10
                    };
                },
                results: function (data, page) {
                    return { results: data }; //, more: true
                },
                params: {
                    contentType: "application/json;odata=verbose",
                    headers: { "accept": "application/json;odata=verbose" }
                }
            },
            id: function (d) { return { id: d.Id }; },
            formatResult: function (d) {
                return d.Name;
            },
            formatSelection: function (p) {
                return p.Id;
            },
            formatNoMatches: function () {
                return "No results found. (Case Sensitive)";
            },
            escapeMarkup: function (m) { return m; },
            dropdownCssClass: "bigdrop",
            initSelection: function (element, callback) {
                var id = $('#<%=hdnCodigo.ClientID%>').val(); //$(element).val();
                if (id !== "") {
                    $.ajax('<%=ResolveUrl("~/api/Search/Customers/")%>' + id, {
                        dataType: 'json'
                    }).done(function (data) { callback(data); });
                }
            }
        }).select2("val", $('#<%=hdnCodigo.ClientID%>').val());

        $('#<%=Codigo.ClientID%>').change(function () {
            $('#<%=hdnCodigo.ClientID%>').attr("value", $('#<%=Codigo.ClientID%>').select2('data').Id);
        });
    });
</script>
<asp:TextBox ID="Codigo" class="input-medium" runat="server" />
<asp:HiddenField ID="hdnCodigo" runat="server" />

It's some example copied, and I don't know if all that code around the hidden field is needed for getting an initial value or existing values between postbacks. Thanks in advance.

EDIT: Thanks to Moshtaf I was able to get my selected Id with small modification to his code. I also completely discarded the HiddenField.

...
            initSelection: function(element, callback) {
                var id = $(element).val();
                if (id !== "") {
                    $.ajax('<%=ResolveUrl("~/api/Search/Customers/")%>' + id, {
                        dataType: 'json'
                    }).done(function(data) { callback(data); });
                }
            }
        }).select2("val", $('#<%=Codigo.ClientID%>').val());

        $("#<%=Codigo.ClientID%>").change(function () {
            $(this).val($(this).select2('data').Id);
        });
    });
</script>

The only problem left is that after the postback, for a small moment appears the selected Id, but suddenly disappears and the control becomes empty. Sure it's something wrong with the line:

}).select2("val", $('#<%=Codigo.ClientID%>').val());

But I don't know how to do this.

Answer 1

Well, as i understand you can using select2 without any problem and you can get ajax results as a dropdownlist and select them in your output, but the only problem is that you can't get selected value (or values) in codebehind. if my assume is correct so you have a textbox and a javascript code like this:

strSelect2FieldId = "#<% = TextBox1.ClientID%>";
$(strSelect2FieldId).select2({
    //Your Config
});

If you want to access the selected value(s), add this code:

$(strSelect2FieldId).change(function () {
    var strSelectedValues = (JSON.stringify($(this).select2('data')));
    $(this).val(strSelectedValues);
});

then call TextBox1.Text in codebehind easily and you can see the selected value(s) as a JSON string.

If i'm misunderstanding your question, please tell me to provide you more information and details, i have some experience about select2 in asp.net and i use this plugin in several projects and several cases and it's so powerful.