autocomplete () генерирует нетекстовый вывод

Question

У меня есть функция autocomplete(), подключенная к базе данных MYSQL.

Jquery полностью выполняется на мельнице:

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

... и если я вручную добавляю запроснапример, «list_venues.php? term = Ku» на URL-адрес list_venues.php, затем эта страница дает соответствующий ответ (например, следующий):

[{"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

Для автозаполнения нужны объекты JSON со свойствами label и value, для другого вам необходимо перестроить его.

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