使用Javascript和CSS彈出窗口定位

我的web應用程序有一個搜索字段，用戶可以在其中輸入一些要搜索的標籤。窗口應在搜索字段下方彈出，如下圖所示：使用Javascript和CSS彈出窗口定位

我需要了解的主要細節是如何實現窗口定位。這是一個隱藏的div與絕對定位和Z指數？我對最常見的Vanilla Javascript，HTML5和CSS方法感興趣。

來源

2017-08-01 ezpresso

這個問題是不是太廣，意見或根據需要討論，所以是題外話堆棧溢出。如果您有特定的，可回答的編程問題，請提供完整的詳細信息。 –

@ezpresso使用JQuery。 https://jqueryui.com/autocomplete/ – aghilpro

@Paulie_D，我明白了。我會提供細節。 – ezpresso

建議框是一個自動完成組件。您可以通過詹姆斯·史密斯（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>

來源

2017-08-03 01:44:54 Jaime

使用Javascript和CSS彈出窗口定位

回答

相關問題