На страничке в наличии поля для заполнения :
textarea id="AC10" - поле "поиска"
span id="AC10-id" и span id="AC10-description" - поля вывода выбранного
<table align="center" border="0">
<tr class="button2" style="color: #0000ff; text-transform: none;"><th><b>Автодополнение слов</b>
<br><textarea id="AC10" rows="3" cols="50"></textarea><div style="text-align: left;"><span id="AC10-id"></span><br><span id="AC10-desc"></span></div>
</th></tr>
</table>
При использовании стандартного autocomplete, пока данные были единичными строками все было норм, но как только данные были расширены до считывания из БД и приобрели формат json-строки застопорилось т.к. разобрать json-строку и вывести только необходимое в поле "поиска" не знаю как. (Для локального считывания minLength пока равен 0, в реальных условиях значение будет увеличено...)
$(function() {
function AC10() {
$( "#AC10" ).autocomplete({
source: function(request, response) {
$.ajax({
url: "json_ac.php",
dataType: "json",
data: { term: request.term },
success: function (data) {
response( data );
alert( "Прибыло \ndata:\n" + data + "\n(Это всё... )" );
}
});
},
focus: function( event, ui ) {
$( "#AC10" ).val( ui.item.name );
return false;
},
select: function( event, ui ) {
$( "#AC10" ).val( ui.item.name );
$( "#AC10-id" ).text( "Id = " + ui.item.id + "." );
$( "#AC10-desc" ).html( "Description: <b>" + ui.item.desc + "</b>" );
return false;
},
minLength: 0
});
}
$( "#AC10" ).change(AC10);
AC10();
});
Данные для формирования в json_ac.php берутся из БД MySQL корректно. Запрос и отклик проходит нормально. При попытке получить запрос вываливается весь доступный список, а необходимо чтобы формировался список доступных вариантов из поля name, а не пустые строки и после выбора данные id, name и desc записывались в свои поля (AC10-id, AC10 и AC10-desc соответственно):
|
Код:
|
["{\"id\":\"58\", \"name\":\"02-rasputin.mp3\", \"desc\":\"Boney M\"}","{\"id\":\"22\", \"name\":\"06-rivers_of_babylon.mp3\", \"desc\":\"Boney M\"}","{\"id\":\"43\", \"name\":\"10-heart_of_gold.mp3\", \"desc\":\"Boney M\"}","{\"id\":\"98\", \"name\":\"01-mamma_mia.mp3\", \"desc\":\"ABBA\"}","{\"id\":\"365\", \"name\":\"06-bang-a-boomerang.mp3\", \"desc\":\"ABBA\"}","{\"id\":\"256\", \"name\":\"11-so_long.mp3\", \"desc\":\"ABBA\"}","{\"id\":\"159\", \"name\":\"04-happy_nation.mp3\", \"desc\":\"Ace of base\"}","{\"id\":\"753\", \"name\":\"08-dancer_in_a_daydream.mp3\", \"desc\":\"Ace of base\"}","{\"id\":\"65\", \"name\":\"12-young_and_proud.mp3\", \"desc\":\"Ace of base\"}","{\"id\":\"85\", \"name\":\"17-space_mix.mp3\", \"desc\":\"Modern Talking\"}","{\"id\":\"12\", \"name\":\"01-youre_my_heart.mp3\", \"desc\":\"Modern Talking\"}","{\"id\":\"47\", \"name\":\"07-atlantis_is_calling.mp3\", \"desc\":\"Modern Talking\"}"] |