文本框下的自動完成div

在我的網站中，我有一個文本框，必須作爲自動填充框起作用。我用我的網頁「headerbar」中的這段代碼：文本框下的自動完成div

Find :<input type="text" class="input2" style="margin-bottom:0px;" id="customersearchfield"> 
<div id="customersearchresult" style="display:none; position:absolute; z-index:999; background:#fff; color:black; ">

CSS：

.input2{ 
    display:   inline; 
    margin-top:   4px; 
    padding:   3px; 
    border:    0px; 
    width:    200px; 
}

預期這不起作用。 resultdiv垂直放置在文本框的正下方，但不水平對齊。它只是對齊瀏覽器窗口的左側。

如何讓resultdiv的左上角直接位於文本字段的左下角，使其直接出現在文本字段的下方？

來源

2013-08-24 Mbrouwer88

你是指[這樣]（http://jsfiddle.net/S4t5G/），或[像這樣，那裏的div和輸入之間沒有空間]（HTTP： //jsfiddle.net/S4t5G/1/）？ – Vucko

嗨Vucko，也許我沒有發佈足夠的代碼。問題是文本字段中的圖片或文本來自文本字段，因此文本字段不在屏幕的左側。 – Mbrouwer88

你能製作一個[JSFiddle]（http://jsfiddle.net/）的確切情況嗎？ – Vucko

您已經在使用絕對定位。你已經，我想，使用Javascript來顯示和填充customersearchresult

爲什麼不同時放置下拉菜單？

var inp = document.getElementById('customersearchfield'); 
var drop = document.getElementById('customersearchresult'); 

var rect = inp.getBoundingClientRect(); 

drop.style.left = rect.left + "px"; 
drop.style.top = (rect.bottom + 2) + "px";

實施例：http://codepen.io/paulroub/pen/Cvoix

來源

2013-08-24 12:50:31

謝謝，這是完美的！ – Mbrouwer88

文本框下的自動完成div

回答

相關問題