GMW/GMW/WebUserControls/mod_autocomplete.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="mod_autocomplete.ascx.cs" Inherits="GMW.WebUserControls.mod_autocomplete" %>
<%if (false)
  { %>
<webopt:BundleReference ID="BundleReference1" runat="server" Path="~/Content/css" />
<webopt:BundleReference ID="BundleReference2" runat="server" Path="~/Content/themes/base/css" />
<%} %>

<script>
    $(function () {
        $("#<%=txtSelezione.ClientID %>").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "<%=txtServiceUrl.Text %>",
                    data: "{'prefixText':'" + request.term + "'}",
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        //response(data.d);
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('#')[0],
                                val: item.split('#')[1]
                            }
                        }))
                    },
                    error: function (result) {
                        alert("Impossibile caricare i dati!");
                    }
                });
            },
            select: function (e, i) {
                $("#<%=hiddenFieldID.ClientID %>").val(i.item.val);
                $("#<%=txtSelezione.ClientID %>").val(i.item.label);
                $("#<%=btnPost.ClientID %>").click();
            },
            //minLength: 2
            minLength: <%=txtMinCharAutoCom.Text %>
            });
    });
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function () {
        $(function () {
            // chiamate jquery da rieseguire post ajax update x partial page render
            $(function () {
                $("#<%=txtSelezione.ClientID %>").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "<%=txtServiceUrl.Text %>",
                            data: "{'prefixText':'" + request.term + "'}",
                            dataType: "json",
                            async: true,
                            success: function (data) {
                                //response(data.d);
                                response($.map(data.d, function (item) {
                                    return {
                                        label: item.split('#')[0],
                                        val: item.split('#')[1]
                                    }
                                }))
                            },
                            error: function (result) {
                                alert("Impossibile caricare i dati!!!");
                            }
                        });
                    },
                    select: function (e, i) {
                        $("#<%=hiddenFieldID.ClientID %>").val(i.item.val);
                        $("#<%=txtSelezione.ClientID %>").val(i.item.label);
                        $("#<%=btnPost.ClientID %>").click();
                    },
                    //minLength: 2
                    minLength: <%=txtMinCharAutoCom.Text %>
                    });
            });
        });
    });
</script>
<%--controlli "principali"--%>
<div class="input-group">
    <span class="input-group-addon">
        <asp:Label runat="server" ID="lblField" Text="Cerca:" Font-Size="0.8em" AssociatedControlID="txtSelezione" />
        <asp:Button runat="server" ID="btnPost" OnClick="btnPost_Click" Visible="false" Text="+" />
    </span>
    <asp:TextBox runat="server" ID="txtSelezione" CssClass="searchinput form-control" OnTextChanged="txtSelezione_TextChanged" AutoPostBack="True" TextMode="SingleLine" AutoCompleteType="Search" />
    <asp:TextBox runat="server" ID="hiddenFieldID" AutoPostBack="true" OnTextChanged="hiddenFieldID_TextChanged" Visible="true" ViewStateMode="Enabled" Width="0em" Font-Size="6pt" BackColor="Transparent" BorderStyle="None" />
    <%--controlli "accessori"--%>
    <asp:TextBox runat="server" ID="txtMinCharAutoCom" Text="2" Visible="false" Width="1em" />
    <asp:TextBox runat="server" ID="txtServiceUrl" Text="Services/WS_data.asmx/Test" Visible="false" Width="1em" />
    <span class="input-group-addon">
        <asp:LinkButton runat="server" ID="lnkReset" Text="X" type="button" OnClick="lnkReset_Click" Font-Size="0.8em" />
    </span>
</div>

<style>
    .ui-autocomplete-category {
        font-weight: bold;
        padding: .2em .4em;
        margin: .8em 0 .2em;
        line-height: 1.5;
    }
</style>