HTML下拉提示搜索框代碼 當用戶在我們的網站上搜索信息時，我們可以通過下拉提示來提升用戶體驗。在這篇文章中，我們將學習如何使用HTML代碼來創建一個下拉提示搜索框。 首先，我們需要創建一個HTML表單，以讓用戶輸入搜索關鍵字。代碼如下：

<form>
<input type="text" placeholder="搜索...">
</form>

接下來，我們需要添加一個下拉提示框，以顯示與用戶輸入匹配的搜索結果。代碼如下：

<form>
<input type="text" placeholder="搜索...">
<div id="result" class="result"></div>
</form>

我們使用了<div>標簽來創建一個名為“result”的容器，并將其添加到表單中。 接下來，我們需要為輸入框添加一個事件監聽器，以便在用戶輸入時顯示相關的結果。代碼如下：

<form>
<input type="text" placeholder="搜索..." onkeyup="search(this.value)">
<div id="result" class="result"></div>
</form>

在這里，我們使用了onkeyup事件監聽器來捕捉用戶在輸入框中輸入的字符，并調用一個名為“search”的JavaScript函數來搜索相關結果。 接下來，我們需要編寫這個“search”函數，讓它在用戶輸入時動態地更新下拉提示框中的搜索結果。代碼如下：

<script>
function search(value) {
var result = document.getElementById("result");
// 通過Ajax技術從服務器上獲取搜索結果
// 將搜索結果添加到下拉提示框中
result.innerHTML = "<p>搜索結果1</p><p>搜索結果2</p>";
}
</script>

在這個搜索函數中，我們首先獲取了名為“result”的div元素。然后，通過使用Ajax技術從服務器上獲取相關的搜索結果，我們將這些結果添加到下拉提示框中。 最后，我們需要為下拉提示框添加一些CSS樣式，以使其更具吸引力和易用性。代碼如下：

<style>
.result {
position: absolute;
top: 100%;
width: 100%;
background-color: #f1f1f1;
z-index: 999;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
max-height: 200px;
overflow-y: auto;
}
.result p {
padding: 12px 16px;
margin: 0;
font-size: 14px;
cursor: pointer;
}
.result p:hover {
background-color: #ddd;
}
</style>

在這個CSS樣式中，我們設置了“result”div元素的位置和大小，并使用了一些box-shadow效果來讓下拉提示框看起來更具陰影感。此外，我們還設置了搜索結果條目的大小和光標樣式。 現在，您已經知道如何使用HTML代碼創建一個下拉提示搜索框了！試試吧！