No coincidencia del diseño de cuadro de texto Autocompletar

He usado un código listo e implementado en mi proyecto. ahora ese código funciona bien en un cuadro de texto y también se obtiene salida. cuando lo uso para otro cuadro de texto fue obtener el resultado del lado del servidor, pero de alguna manera no se mostrará en el lado del cliente.

@model IEnumerable ....   .... @using (Html.BeginForm("Index", "UserDetails", FormMethod.Get)) { @Html.TextBox("SearchName", "", new { @class = "control-label col-md-2", Style = "margin-right:10px;", placeholder = "Name", id = "txtUserName" }) @Html.TextBox("SearchEmail", "", new { @class = "control-label col-md-2", Style = "margin-right:10px;", placeholder = "Email", id = "txtEmail" }) @Html.DropDownList("SearchDesignation", ViewBag.DesignationList as SelectList, "Select", new { @class = "control-label col-md-2", Style = "margin-right: 10px; margin-top: 5px; height: 32px;" })  }  .... 
$("#txtUserName").keypress(function () { $("#txtUserName").autocomplete({ source: function (request, response) { $.ajax({ url: "/UserDetails/SearchName", type: "POST", dataType: "json", data: { Prefix: request.term }, success: function (data) { response($.map(data, function (item) { return { label: item.Name, value: item.Name }; })) } }) }, messages: { noResults: "", results: "" } }); }) $("#txtEmail").keypress(function () { $("#txtEmail").autocomplete({ source: function (request, response) { $.ajax({ url: "/UserDetails/SearchEmail", type: "POST", dataType: "json", data: { Prefix: request.term }, success: function (data) { response($.map(data, function (item) { return { label: item.Name, value: item.Name }; })) } }) }, messages: { noResults: "", results: "" } }); })

arriba está mi código para eso. aquí tengo adjuntar dos imágenes. En una imagen, puede ver el resultado, mientras que en otro, solo se muestra el punto enter image description here enter image description here

No debe escribir el código de inicialización en eventos que ocurren varias veces. Cada vez que ocurre el evento, simplemente reinicializa el widget en lugar de dejarlo hacer su trabajo. Tu código debería ser:

 $("#txtUserName").autocomplete({ source: function(request, response) { $.ajax({ url: "/UserDetails/SearchName", type: "POST", dataType: "json", data: { Prefix: request.term }, success: function(data) { response($.map(data, function(item) { return { label: item.Name, value: item.Name }; })) } }) }, messages: { noResults: "", results: "" } }); 

Puedes probarlo después del éxito

  $(document).unbind('keypress');