大部分人在使用搜索引擎時都會逐漸習慣搜索框的下拉提示功能，也就是根據輸入的關鍵字自動顯示出與該關鍵字相關的搜索建議。

這個自動提示的功能是通過JavaScript來實現的，在該搜索框中輸入字符后，它將與服務器交互并獲取與該關鍵字相關的建議內容，并將其呈現給用戶。

不僅百度，其他搜索引擎也支持下拉提示功能，讓我們來看一下如何在您的網站上實現這個功能。

<form action="/" method="get">  
<input type="text" id="search" name="search" placeholder="輸入搜索內容">  
<ul id="suggestions" style="display: none;"></ul>  
</form>

首先，您需要將一個HTML<ul>元素添加到搜索框中，以顯示搜索建議。它將默認處于隱藏狀態。

const searchInput = document.querySelector('#search');  
const suggestionsList = document.querySelector('#suggestions');  
const endpoint = 'https://suggest.taobao.com/sug?code=utf-8&q=';  
searchInput.addEventListener('keyup', (event) => {  
event.preventDefault();  
const searchString = searchInput.value.trim();  
if (searchString.length === 0) {  
suggestionsList.style.display = 'none';  
} else {  
showSuggestions(searchString);  
}  
});  
async function showSuggestions(searchString) {  
const response = await fetch(`${endpoint}${searchString}`);  
const data = await response.json();  
const suggestions = data.result;  
renderSuggestions(suggestions);  
}
function renderSuggestions(suggestions) {  
const html = suggestions.map(suggestion => {  
return `<li>${suggestion[0]}</li>`;  
});  
suggestionsList.innerHTML = html.join('');  
suggestionsList.style.display = 'block';  
}

現在，讓我們來看一下JavaScript代碼。我們首先獲取搜索框和建議列表，然后將包含建議內容的API URL存放在endpoint變量中。

我們添加一個事件監聽器來監聽搜索框的鍵盤輸入，當用戶按鍵時，輸入的字符串被提取出來。如果字符串為空，建議列表會隱藏；如果不為空，showSuggestions函數將被調用。

然后，我們獲取API響應，將其轉換為JSON，然后取出其中的建議數組。我們使用renderSuggestions函數在建議列表中呈現這個數組。

該函數將遍歷建議數組并將它們轉換為HTML列表項。HTML字符串使用.join()方法連接而成，然后添加到建議列表中。

接下來，在建議列表得到HTML列表之后，我們將其顯示出來。style.display屬性設置為 'block',就會顯示出來啦。

這就完成了建議列表的功能，它將根據用戶輸入自動提供相關的搜索建議。

值得注意的是數據庫被用于保存搜索提示功能，因此您可以在自己的數據庫中添加數據，并使用相應的API獲取它們，并將它們提供給您的用戶。