autocomplete（）生成非文本输出

Question

我有一个连接到MYSQL数据库的autocomplete()函数。

jquery完全在工厂运行了：

$(function() {
    $(".choose_venue").autocomplete({
        source: "list_venues.php",
        minLength: 1
        });                
    });

...并且如果我在list_venues.php的URL上手动添加诸如“ list_venues.php？term = Ku”之类的查询，则该页面会给出适当的响应（例如以下内容）：

[{“ name”：“ Fonderie Kugler”}，{“ name”：“ Kulturhaus Helferei”}，{“ name”：“ Kunstraum Walcheturm”}]

因此，像下面的 这样的简单input应该可以正常工作：

<input type="text" style="width:270px;" class="choose_venue"/>

但是，我得到的输出是一个不包含任何文本，但仅包含一些微弱行的窗口。

我首先认为这可能是CSS中的问题，但是即使删除了所有CSS修改，问题仍然存在。

我的下一个想法是这可能是浏览器问题（我使用Safari），但Chrome的行为方式完全相同。

我仅有的另一个想法是，我正在调用的jquery文件已过期或存在其他问题，但是我尝试了多个链接，但总是得到相同的结果。在最近的尝试中，我正在链接到以下文件：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

这些灰线的数量似乎对应于应返回的文本值的数量。但是除此之外，我不知道是什么原因造成的。

Answer 1

自动完成功能需要具有label和value属性的JSON对象，对于另一个对象，您需要对其进行重建。

$(function() {
  $(".choose_venue").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "list_venues.php",
        success: function(data) {
          // needed if response header not JSON
          data = JSON.parse(data);
          data = $.map(data, function (obj) {
                return obj.name
            });
          response(data);
        }
      });
    },
    minLength: 1
  });
});