Автозаполнение JQuery UI с Ajax PHP MYSQL не отображает результат

Question

Автозаполнение JQuery UI с Ajax PHP MYSQL не отображает результат

Я реализовал JQuery Ui autocomplete функция для отображения содержимого из database используя код ниже

скрипт

<script>
$(function() {
$( "#query" ).autocomplete({
source: 'search.php'
});
});
</script>

HTML

<div class="col-md-9 col-sm-8 col-xs-8 " >
<input style="width:100%;"class="form-control"  id="query" placeholder="Search" type="text">
</div>

Когда я запускаю выше, я получаю следующий результат в течение span notification

<span role="status" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
<div style="display: none;">
3 results are available, use up and down arrow keys to navigate.</div>
<div style="display: none;">
4 results are available, use up and down arrow keys to navigate.</div>
<div>4 results are available, use up and down arrow keys to navigate.</div></span>

Но автозаполнение UL>li поле не содержит никакого значения

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: none; top: 902.452px; left: 72.7257px; width: 372px;">
<li class="ui-widget-content ui-menu-divider"></li>
<li class="ui-widget-content ui-menu-divider"></li>
<li class="ui-widget-content ui-menu-divider"></li>
<li class="ui-widget-content ui-menu-divider"></li>
</ul>

Это то, что я могу видеть

И вот результат, который я получаю в chrome ->Network

[{name: "asa"}, {name: "Abhijit Das"}, {name: "Abhijit Das"}, {name: "Abhijit Das"}]

0

jquery jquery-ui-autocomplete mysql php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Как предположил @marmeladze, ваша проблема, скорее всего, заключается в формате ответа кода php. В соответствии с https://jqueryui.com/autocomplete/ у вас должен быть простой массив вроде этого:

[
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++"];

В соответствии с http://api.jqueryui.com/autocomplete/ Поддерживаются несколько типов:

Массив: массив может использоваться для локальных данных.
Существует два поддерживаемых формата:
Массив строк: [«Choice1», «Choice2»] Массив объектов со свойствами label и value: [{label: «Choice1», value: «value1»}, …] Свойство метки отображается в меню предложений. Значение будет
быть вставленным в элемент ввода, когда пользователь выбирает элемент. Если
указано только одно свойство, оно будет использоваться для обоих, например, если вы
предоставить только свойства значения, значение также будет использоваться как
этикетка.

Еще один пример с удаленным сервером (https://jqueryui.com/autocomplete/#remote):

[
{"id":"Nycticorax nycticorax",
"label":"Black-crowned Night Heron",
"value":"Black-crowned Night Heron"},
{"id":"Corvus cornix",
"label":"Hooded Crow",
"value":"Hooded Crow"}
]

0