GMW/GMW/WebUserControls/mod_autocomplete.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="mod_autocomplete.ascx.cs" Inherits="GMW.WebUserControls.mod_autocomplete" %>

<script>
    function set<%=txtSel.ClientID %>()
    {
        $("#<%=txtSel.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);
                $("#<%=txtSel.ClientID %>").val(i.item.label);
                $("#<%=btnPost.ClientID %>").click();
            },
            minLength: <%=txtMinCharAutoCom.Text %>
            });
    }
    // aggancio evento doc pronto con jQuery...
    $(function () {
        set<%=txtSel.ClientID %>();
    });
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function () {
        $(function () {
            // chiamate jquery da rieseguire post ajax update x partial page render
            $(function () {
                set<%=txtSel.ClientID %>();
            });
        });
    });
</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="txtSel" />
        <asp:Button runat="server" ID="btnPost" OnClick="btnPost_Click" Visible="false" Text="+" />
    </span>
    <asp:TextBox runat="server" ID="txtSel" CssClass="searchinput form-control" OnTextChanged="txtSel_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>