如何在特定的 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-ui 生成的 div 的内容复制到您的 div 并隐藏默认 div：

jQuery:

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

如果输入为空，则为空的自定义 div：

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

CSS：

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

JSFiddle

默认自动完成 div 的 ID (#ui-id-1) 可能会有所不同。

更新：

要将下拉列表中的一个可能选项添加到您的文本框，请添加以下内容：

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

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

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

见updated fiddle（我也整理了一下）。