2016-07-24 6 views
0

Я выполнил JQuery Ui autocomplete функцию для отображения контента из database используя код нижеJQuery UI автозаполнения с Ajax PHP MYSQL не отображает результат

Script

<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> 

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

enter image description here

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

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

Что реакция AJAX позвонить? Вы можете увидеть его в Chrome F12 -> Network –

+0

, а ваш 'search.php' возвращает массив объектов? – marmeladze

+0

@marmeladze возвращает json, как указано выше, которое я разместил – silverFoxA

ответ

0

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

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

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

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

Другой пример с удаленным сервером (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

Спасибо, следующее решение для меня – silverFoxA