0
我的web應用程序有一個搜索字段,用戶可以在其中輸入一些要搜索的標籤。窗口應在搜索字段下方彈出,如下圖所示: 使用Javascript和CSS彈出窗口定位
我需要了解的主要細節是如何實現窗口定位。這是一個隱藏的div與絕對定位和Z指數? 我對最常見的Vanilla Javascript,HTML5和CSS方法感興趣。
我的web應用程序有一個搜索字段,用戶可以在其中輸入一些要搜索的標籤。窗口應在搜索字段下方彈出,如下圖所示: 使用Javascript和CSS彈出窗口定位
我需要了解的主要細節是如何實現窗口定位。這是一個隱藏的div與絕對定位和Z指數? 我對最常見的Vanilla Javascript,HTML5和CSS方法感興趣。
建議框是一個自動完成組件。您可以通過詹姆斯·史密斯(http://loopj.com/jquery-tokeninput/)很好地使用jQuery的記號輸入
至於位置好奇心:
這只是一個與輸入元素的底部對齊的問題。這可以使用純CSS完成。
input {
width: 50%;
}
.spanClass {
display: none;
}
.focusAlign input[type="text"]:focus~.spanClass {
display: block;
width: 50%;
box-sizing: border-box;
position: absolute;
top: 29px;
left: 8px;
background: #333;
padding: 3px;
font: .75em sans-serif;
color: #eee;
}
<div class="focusAlign">
<input id="same" type="text" value="" />
<span class="spanClass">
<p>Oh, this is a suggestion.</p>
<p>Yeah, well, so am I.</p>
<p>Me, too!</p>
<p>Whatever, I'm here.</p>
</span>
</div>
這個問題是不是太廣,意見或根據需要討論,所以是題外話堆棧溢出。如果您有特定的,可回答的編程問題,請提供完整的詳細信息。 –
@ezpresso使用JQuery。 https://jqueryui.com/autocomplete/ – aghilpro
@Paulie_D,我明白了。我會提供細節。 – ezpresso