自动填充文本框设计不匹配

我已经使用了现成的代码并在我的项目中实现它。 既然代码在一个文本框中工作正常，它也得到输出。 当我将它用于另一个文本框时，它从服务器端获得结果，但不知何故它不会在客户端显示。

@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: "" } }); })  

以上是我的代码。 这里我附上两张图片。 在一个图像中，您可以看到结果，而在其他图像中只显示点

Answer 1

您不应该在多次发生的事件中编写初始化代码。 每次事件发生时，它只是重新初始化小部件而不是让它做它的工作。 你的代码应该是：

 $("#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: "" } }); 

Answer 2

你可以在成功后测试它

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