Div包含輸入輸入時出現的動態生成列表

本質上，我試圖爲自動完成創建HTML/CSS。我希望它看起來/行爲大致如下：http://www.skyscanner.com/（輸入From或To字段）Div包含輸入輸入時出現的動態生成列表

我不擔心實際做出自動完成的工作，我只是想創建HTML/CSS它將用於顯示由自動完成生成的文本項列表。

這是基本的佈局，我希望做：

enter image description here

輸入框1和輸入框2是什麼我現在有。當用戶點擊其中一個輸入框時，我想要顯示相應的自動完成框（此時將顯示假數據）。

不幸的是，我想不出我會如何做這樣的事情。任何人都可以讓我開始或指向正確的方向嗎？

來源

2012-05-13 Jordan

是否輸入框中有一個專門的寬度，你不介意拋出一些JS混進去？我假設你想讓提示框顯示在輸入框下面的任何其他元素的頂部。 –

是的，輸入框有一個設定的寬度和高度，我希望建議框出現在其他的頂部。我希望有一種方法可以在沒有JS的情況下創建這個盒子，因爲我正在與其他人一起做JS。我只是希望用HTML和CSS創建彈出框。所以第二個想法是，如果這個盒子現在就在那裏，坐在所有東西之上，而且我正在使用的其他人可以擔心JS讓它隱藏起來，然後在用戶開始輸入時出現。 – Jordan

基本的想法是有一個父元素相對於頁面定位，但不移動它。由於此元素已定位（非靜態），因此您可以在文本框下將建議框相對於父元素絕對定位爲。由於它是絕對定位的，它不會影響文檔流，也可以看作是文本框下面的其他元素。像這樣的東西應該工作：

HTML：

<span class="tbSuggestParent"> <input type="text" class="tbSuggest"> <span class="suggestions"></span> </span>

CSS：

.tbSuggestParent { position: relative; display: inline-block; } .tbSuggest { width: 200px; height: 30px; font-family: Arial; font-size: 14pt; border: 2px solid black; border-radius: 2px; } .suggestions { position: absolute; width: 170px; height: 300px; top: 36px; left: 15px; border: 1px solid black; border-radius: 2px; display: inline-block; background-color: white; }

這包括圓角邊框爲你的形象似乎表明，使用border-radius。如果該屬性在給定的瀏覽器中不可用，則應該使用常規邊框。

演示（包括下面的文字）：http://www.dstrout.net/pub/suggest.htm

來源

2012-05-14 00:20:32

非常感謝，這工作完美。 :) – Jordan

這裏有一個簡單的方法

包裝你的元素在div。 爲什麼？它可以避免你使用了很多不必要的風格

設置div來定位爲relative，然後自動完成框中會自動對齊到輸入框和容器。

這是我建議的標記。

<div class="field"> 
    <input type="text" /> 
    <ul class ="autocomplete"> 
      <li>Option 1</li> 
      <li>Option 2</li> 
      <li>Option 3</li> 
      <li>Option 4</li> 
      <li>Option 5</li> 
    </ul> 
</div>

Demo

來源

2012-05-14 01:04:19 Starx

Div包含輸入輸入時出現的動態生成列表

回答

相關問題