自动完成文本框设计不匹配 [英] Mismatch of Autocomplete textbox design

问题描述

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

i have used a ready made code and implement it in my project. now that code is working fine in one textbox and it is also get output. when i use it for another text box it was get the result from server side but somehow it wont display in client side.

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

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

above is my code for that. here i have attach two images. In one image you can see the result while in other only dot is display

推荐答案

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

You shouldn't write initialization code in events that occurs multiple times. Every time the event occurs it just re-initializes the widget instead of letting it do it's work. Your code should be:

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

这篇关于自动完成文本框设计不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！