Question

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

我已经在其他帖子中搜索过这方面的解决方案，但他们所做的是改变＆＃34; popup＆＃34;的位置。窗口，我想要的是用结果替换<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（#ui-id-1）的ID可能会有所不同。

<强>更新

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

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

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

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

请参阅updated fiddle（我稍稍整理了一下）。

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

1 个答案: