jQuery自动完成不显示答案

【问题标题】：jQuery autcomplete not displayingjQuery自动完成不显示
【发布时间】：2017-02-26 02:04:56
【问题描述】：

我已经浏览了许多关于此的以前的帖子，但我认为我的帖子比我发现的要简单得多。我的字段请求数据成功，但没有显示。我会假设这与显示它的 CSS 有关。我正在使用 jQuery UI CSS 来显示它，就像在我设计的其他网站上一样：

<link href="/css/console/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />

这是我试图展示它的地方。我在这里做错了什么？我已经在其他网站上进行了这项工作。

<input type="text" name="userSearch" id="userSearch"/>
<input class="button" style="top: -1px; margin-left: 5px;" type="button" value="SEARCH" />
<input type="hidden" id="hiddenUserWom" value="" /></span></div>
      <script type="text/javascript" src="/js/jquery-ui-1.8.18.custom.min.js"></script>
      <script type="text/javascript">
      $('#userSearch').autocomplete({
            source: '/console/ajax/user_search_autocomplete.php',
            minLength: 3,
            select: function (event, ui) {
                $("#userSearch").val(ui.item.label); 
                $("#hiddenUserWom").val(ui.item.id);
        }
      });

      $(document).ready( function () {
          $("#userSearch").focus();
      });
      </script>

这里是成功返回的数据：这是一个返回的例子：

[ { "label": "5U5NU - Devin Parker - Vacaville, CA", "id": "5U5NU" }]

jQuery UI 的数据格式描述来自官网：

预期的数据格式

来自本地数据、url 或回调的数据可以分为两种变种：

字符串数组：[ "Choice1", "Choice2" ] 对象数组标签和值属性：[ { label: "Choice1", value: "value1" }, ... ]

这应该可以正常工作。

这里是网站：http://wombusiness.com/console/members/

这是需要自动完成的电源搜索字段。

【问题讨论】：

@harhahu - 我认为你不明白这是如何工作的。有人能帮我一下吗？显然，我想在选择的搜索字段中显示单击元素的值。这里还能发生什么？

标签： jquery autocomplete

【解决方案1】：

将您的自动完成功能放入您的 $(document).ready

<input type="text" name="userSearch" id="userSearch"/>
<input class="button" style="top: -1px; margin-left: 5px;" type="button" value="SEARCH" />
<input type="hidden" id="hiddenUserWom" value="" /></span></div>
  <script type="text/javascript" src="/js/jquery-ui-1.8.18.custom.min.js"></script>
  <script type="text/javascript">


  $(document).ready( function () {
  $('#userSearch').autocomplete({
        source: '/console/ajax/user_search_autocomplete.php',
        minLength: 3,
        select: function (event, ui) {
            $("#userSearch").val(ui.item.label); 
            $("#hiddenUserWom").val(ui.item.id);
    }
  });
      $("#userSearch").focus();
  });
  </script>

问题 #2 $("#userSearch").val(ui.item.label); 您正在用自己的数据覆盖您的自动完成功能。

【讨论】：

为什么输入字段的属性是autocomplete="off"？
没用。数据返回成功，但没有显示。
@mavrick - 那在哪里？我没有将其应用于任何领域。
在您的选择中尝试使用警报（ui.item.label）
@harhahu - 如果要从中选择的列表从未出现过，则选择不会执行。我需要显示结果列表。

【解决方案2】：

问题出在 PHP 的返回上。如果您尝试完全相同但使用数组中的固定集作为源，则自动完成功能完美。

JSON 编码看起来不错。

我知道您不需要或使用它，但请尝试在每个项目中添加value。我不确定，但value 可能是必填字段，您测试它会比我更容易。

【讨论】：