Question

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

@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>

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

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');

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

2 个答案: