Как показать результаты автозаполнения в конкретном div

Question

У меня есть поле автозаполнения на моем сайте. Я просто хочу отображать результаты внутри тега <div> вместо всплывающего окна, которое плагин открывается изначально.

Я искал уже решения для этого в других сообщениях, но они делают это, чтобы изменить положение окна «всплывающего окна», и я хочу заменить содержимое <div> результатами, а не ставить всплывающее окно.

Это мой код:

$('#keyword').autocomplete(
{ 
    source : '/Dev/pages/suivi_searchCompany.php', 
    select: function(event, ui) 
    {    
     console.log(ui.item.value); 
     loadHisto(ui.item.value); 
     loadInfosCompanies(ui.item.value); 
     loadInfosContact(ui.item.value)  
    } 
}) 
.data("ui-autocomplete")._renderItem = function(ul, item) 
{ 
    console.log('test'); 
    console.log(item); 
    console.log(ul); 
    return $("<li>") 
     .append("<a>" + item.name + "</a>") 
     .appendTo(ul); 
}; 

Answer 1

Некрасивые, но может быть достаточным решением может быть просто скопировать содержимое JQuery-щ-генерируемых дел до вашего DIV и скрыть DIV по умолчанию:

JQuery:

$('#ui-id-1').bind('DOMSubtreeModified', function() { 
    $('#mycontainer').html($('#ui-id-1').html()); 
}); 

пустой заказ ДИВ если вход пуст:

$('#keyword').keyup(function() { 
    if($(this).val() == '') { 
    $('#mycontainer').html(''); 
    } 
}); 

CSS:

#ui-id-1 { 
    display: none !IMPORTANT; 
} 

JSFiddle

Идентификатор автозаполнения по умолчанию DIV (#ui-id-1) в может отличаться.

UPDATE:

Чтобы добавить один из возможных вариантов из выпадающего списка, выберите текстовое поле, добавьте это:

$('#mycontainer').on('click', 'li', function() { 

    //add option to textbox 
    $('#keyword').val($(this).html()); 

    //hide/clear dropdown 
    $('#mycontainer').html(''); 
}); 

См updated fiddle (который я прибрала немного Aswell).