如何在特定div中顯示自動完成結果

我在我的網站中有一個自動填充字段。我只想在<div>標記內顯示結果，而不是插件本身打開的彈出窗口。如何在特定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); 
};

來源

2016-03-05 MedMatrix

醜陋，但也許足以解決方案可能是簡單的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

默認自動完成股利（#ui-id-1）的ID可能會有所不同。

UPDATE：

要添加從下拉到您的文本框中可能的選項之一，補充一點：

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

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

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

見updated fiddle（我整理了一下藏漢）。

來源

2016-03-05 21:38:52 WcPc

謝謝你，我明白你的解決方案！但是，如何，在你的例子中，我把結果？ – MedMatrix

只需用您的源代碼替換'autocomplete'源代碼（'/ Dev/pages/suivi_searchCompany.php''我猜？）並刪除'keywordlist'（僅作爲示例） – WcPc

您的解決方案只適用於我想要顯示結果。這種方法不會在自動完成中選擇include選項（select：function（event，ui）），如果我點擊一個結果什麼都不會發生。 – MedMatrix

如何在特定div中顯示自動完成結果

回答

相關問題