JQuery 自动完成答案

【问题标题】：JQuery AutocompleteJQuery 自动完成
【发布时间】：2013-01-14 09:47:29
【问题描述】：

我的 jQuery 自动完成字段有问题。有点奇怪。

这是我的自动完成字段和脚本。我的 mvc 函数的响应工作正常。下拉列表是可见条目。但是当我试图选择一个项目时，结果列表就会消失。有人有想法吗？

 <div class="ui-widget">
    <input id="newPlayerName" type="text" name="newPlayerName" onkeyup="checkRegistration()" />
 </div>

代码：

<script type="text/javascript">
  $(function () {
      $('#newPlayerName').autocomplete({
          source: function (request, response) {
              $.ajax({
                  url: '/Trainer/Search',
                  data: {
                      searchTerm: request.term
                  },
                  dataType: 'json',
                  type: 'POST',
                  minLength: 1,

                  success: function (data) {
                      response(data);
                  }
              });
          },
          select: function (event, ui) {
              checkRegistration(ui.item.value);
          },
          focus: function (event, ui) {
              event.preventDefault();
              $("#newPlayerName").val(ui.item.label);
          }
      });
  });
</script>

啊...这是我正在使用的 jquery 脚本...

<script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.10.0.custom.js" type="text/javascript"></script>

【问题讨论】：

标签： asp.net-mvc jquery autocomplete

【解决方案1】：

您显示的代码似乎有一点问题，那就是您已经包含了两次jquery-ui 脚本（缩小版和标准版）。你应该只有一个：

<script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>

【讨论】：

【解决方案2】：

$(function () {
  var getData = function (request, response) {
    $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: "Default.aspx/GetMultiProductList",
      data: "{'term':'" + $("#txtAutoCompleteMulti").val() + "'}",
      dataType: "json",
      success: function (data) {
        response($.map(data.d, function (item) {
          if (item != null)
            return { label: item.label, title: item.value }//value: item.label,
            }))
      },
      error: function (result) {
        alert("Error");
      }
    });
  };
  var selectItem = function (event, ui) { $("#txtAutoCompleteMulti").val(ui.item.value); return false; }
  $("#txtAutoCompleteMulti").autocomplete({
    source: getData,
    select: selectItem,
    _resizeMenu: function () {
      this.menu.element.outerWidth(500);
    },
    search: function (event, ui) { },
    minLength: 1,
    change: function (event, ui) {
      if (!ui.item) {
        $('#txtAutoCompleteMulti').val("")
      }
    },
    select: function (event, ui) {
      $("#txtAutoCompleteMulti").prop('title', ui.item.title)
    },
    autoFocus: true,
    delay: 500
  });
});

 .ui-autocomplete {
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .ui-autocomplete-loading {
            background: url('img/Progress_indicator.gif') no-repeat right center;
        }
        .seachbox {
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 250px;
            padding: 6px 25px 6px 6px;
            transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        }

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<div>
   <table style="width: 100%;">
     <tr>
       <td style="width: 20%">Product Name :</td>
       <td>
         <input type="text" id="txtAutoCompleteMulti" placeholder="Seach Product" class="seachbox" />
       </td>
     </tr>
  </table>
</div>

c# code using webmethod

【讨论】：