Bootstrap 中的下拉搜尋欄將文字輸入欄位與下拉選單相結合，為使用者提供可供選擇的選項，同時允許他們輸入自定義搜尋查詢，它可以透過提供靈活性和便利性來增強使用者體驗。
最終輸出的預覽：讓我們看看最終輸出是什麼樣子的。
帶搜尋欄的下拉選單的預覽影象
用到的技術：
HTML
CSS
JavaScript
Bootstrap 5
實現步驟：
利用 HTML、JavaScript 和 Bootstrap 5。
建立一個帶有搜尋欄的基於網路的互動式下拉選單。
利用 JavaScript 函式 handleInput 響應搜尋欄中的使用者輸入。
根據使用者輸入過濾和排序預定義的專案列表。
動態更新下拉選單以顯示匹配結果。
如果沒有匹配項，則顯示“無專案”訊息。
利用 Bootstrap 進行樣式設計。
為從網頁列表中搜索和選擇專案提供互動式和使用者友好的體驗。
下方是具體實現原始碼：此示例描述了使用 HTML、Javascript 和 Bootstrap 5 實現帶搜尋欄的下拉選單的基本實現。
HTML實現：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Document </title> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="dropdown m-4"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu pt-0" aria-labelledby="dropdownMenuButton1"> <input type="text" class="form-control border-0 border-bottom shadow-none mb-2" placeholder="Search..." oninput="handleInput()"> </ul> </div> <script src="./script.js"></script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> </script> </body> </html>
JavaScript原始碼：
const handleInput = () => {
const inputValue =
document
.querySelector('.form-control').value;
const results =
["apple", "banana", "cherry",
"date", "elderberry"];
const parentElement =
document
.querySelector(".dropdown-menu");
const elementsToRemove =
document.querySelectorAll("li");
elementsToRemove.forEach(element => {
element.remove();
});
if (inputValue) {
const matchingWords =
results
.filter(word => word
.includes(inputValue));
matchingWords.sort((a, b) => {
const indexA =
a.indexOf(inputValue);
const indexB =
b.indexOf(inputValue);
return indexA - indexB;
});
matchingWords.forEach(word => {
const listItem =
document.createElement("li");
const link =
document.createElement("a");
link.classList.add("dropdown-item");
link.href = "#";
link.textContent = word;
listItem.appendChild(link);
parentElement.appendChild(listItem);
});
if (matchingWords.length == 0) {
const listItem =
document.createElement('li');
listItem.textContent = "No Item";
listItem.classList.add('dropdown-item');
parentElement.appendChild(listItem);
}
} else {
results.forEach(word => {
const listItem =
document.createElement("li");
const link =
document.createElement("a");
link.classList.add("dropdown-item");
link.href = "#";
link.textContent = word;
listItem.appendChild(link);
parentElement.appendChild(listItem);
});
}
}
handleInput();
最終效果：
