如何在特定 div 中显示自动完成结果

Question

我的网站有一个自动完成字段。我只想在 <div> 标签内显示结果，而不是插件本机打开的弹出窗口 window。

我已经在其他帖子中搜索了解决方案，但是他们所做的是更改 "popup" window 的位置，而我想要的是替换 <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

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

更新：

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

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

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

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

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

如何在特定 div 中显示自动完成结果

How to show autocomplete results in a specific div

html

javascript

jquery

autocomplete

jquery-ui-autocomplete