オートコンプリートのテキストボックスデザインの不一致

Question

私は準備が整えられたコードを使用してプロジェクトで実装しています。コードが1つのテキストボックスでうまく動作し、出力も得られるようになりました。別のテキストボックスに使用すると、サーバー側から結果が得られましたが、何とかクライアントサイドに表示されません。

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

上記は私のコードです。ここで私は2つの画像を添付しています。他の唯一のドットで表示

Answer 1

いる間に一枚の画像では、あなたは、あなたが複数回発生するイベントで初期化コードを書くべきではありません成功

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

Answer 2

後にそれをテストすることができ、結果を見ることができます。イベントが発生するたびに、ウィジェットの動作をさせるのではなく、ウィジェットを再初期化するだけです。あなたのコードは：

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