自动完成文本框设计不匹配答案

【问题标题】：Mismatch of Autocomplete textbox design自动完成文本框设计不匹配
【发布时间】：2016-06-30 14:20:50
【问题描述】：

我使用了现成的代码并在我的项目中实现它。现在该代码在一个文本框中运行良好，并且也可以输出。当我将它用于另一个文本框时，它是从服务器端获取结果，但不知何故它不会显示在客户端。

@model IEnumerable<UMS.Models.UserDetail>
....
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui-1.9.0.min.js"></script>
....
@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;" })  <input type="submit" value="Search" onclick="location.href='@Url.Action("Index", "Users")'" />
}
<table class="table">
    ....
</table>

<script type="text/javascript">
    $("#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: ""
            }
        });
    })
</script>

以上是我的代码。在这里我附上了两张图片。在一张图片中您可以看到结果，而在另一张图片中只有一个点是 display

【问题讨论】：

可以从表单中检查吗？！
不，它在html中生成动态ui标签
控制台有错误吗？！
控制台没有错误

标签： jquery html css asp.net-mvc jquery-autocomplete

【解决方案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: ""
  }
});

【讨论】：

感谢您的解决方案，但我在第二个函数（即 txtEmail 函数）中遇到错误。我已经实现了你的代码，但我仍然面临这个错误。
好吧，除非您提供错误的详细信息，我们无法为您提供帮助。

【解决方案2】：

成功后就可以测试了

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

【讨论】：

我是否需要像这样成功编写此代码：成功：函数（数据）{响应（$.map（数据，函数（项目）{$（文档）.unbind（'keypress'） ); 返回 { 标签：item.Name，值：item.Name }; })) }