jQuery AutoComplete with multiple words and save there id in HiddenField using jQuery autocomplete plugin in ASP.Net

Hi nagaraju60,

I have sorted the problem of storing the extra Ids which are not selected Text in textbox. But the second thing which you are saying to maintain the values when we use down array key is not possible because its plugin functionality and we need to modify the autocomplete js and we cant do that.

Refer the below sample code and modify the code according to your need.

HTML

<div>
    <asp:TextBox ID="txtSearch" runat="server" Style="width: 300px"></asp:TextBox>
    <asp:HiddenField ID="hfCustomerId" runat="server" />
    &nbsp;&nbsp;
    <asp:Button ID="btnSubmit" CssClass="btn btn-primary" runat="server" Text="Save"
        OnClick="Submit" />
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
        type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
        rel="Stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            var selectedIds = [];
            var selectedMaps = {};

            $("#<%=txtSearch.ClientID %>").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                }
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    var text = this.value.split(/,\s*/);
                    text.pop();
                    text.push(i.item.value);
                    text.push("");
                    this.value = text.join(", ");
                    var Label = $.trim(i.item.label);
                    var Value = $.trim(i.item.val);
                    selectedMaps[Label] = { label: Label, val: Value };
                    selectedIds.push(i.item.val);
                    return false;
                },
                minLength: 1
            });

            $('[id*=btnSubmit]').click(function () {
                var textboxvalues = [];
                var message = '';
                textboxvalues = $('[id*=txtSearch]').val().split(',');
                var selectedValueIds = '';
                for (var i = 0; i < textboxvalues.length; i++) {
                    var textboxValue = $.trim(textboxvalues[i]);
                    if (textboxValue != '') {
                        selectedValueIds += selectedMaps[textboxValue].val + ',';
                        message += "ContactName : " + selectedMaps[textboxValue].label + '\n';
                        message += "CustomerId : " + selectedMaps[textboxValue].val + '\n';
                    }
                }
                $('[id*=hfCustomerId]').val(selectedValueIds);
                alert(message);
            });
        }); 
    </script>
</div>

C#

protected void Submit(object sender, EventArgs e)
{
    string customerNames = Request.Form[txtSearch.UniqueID];
    string customerIds = Request.Form[hfCustomerId.UniqueID];
}

VB.Net

Protected Sub Submit(ByVal sender As Object, ByVal e As System.EventArgs)
    Dim customerName As String = Request.Form(txtSearch.UniqueID)
    Dim customerId As String = Request.Form(hfCustomerId.UniqueID)
End Sub

ScreenShot