多引擎搜索框：Bootstrap5实现，支持搜索联想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
<title>多引擎搜索框</title>
</head>
<body>
<div class="container mt-5">
<div class="input-group mb-3">
<input type="text" class="form-control" id="searchInput" placeholder="输入关键词..." aria-label="Search">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" onclick="searchGoogle()">Google</button>
<button class="btn btn-outline-secondary" type="button" onclick="searchBing()">Bing</button>
<button class="btn btn-outline-secondary" type="button" onclick="searchYahoo()">Yahoo</button>
</div>
</div>
<ul id="searchSuggestions" class="list-group"></ul>
</div>
<script>
const searchInput = document.getElementById('searchInput');
const searchSuggestions = document.getElementById('searchSuggestions');
searchInput.addEventListener('input', () => {
const searchTerm = searchInput.value.trim();
if (searchTerm.length > 0) {
// 模拟搜索联想，实际应用中可替换为后端API调用
const suggestions = ['apple', 'banana', 'cherry', 'date', 'elderberry'].filter(suggestion => suggestion.startsWith(searchTerm));
renderSuggestions(suggestions);
} else {
clearSuggestions();
}
});
function renderSuggestions(suggestions) {
clearSuggestions();
suggestions.forEach(suggestion => {
const li = document.createElement('li');
li.classList.add('list-group-item');
li.textContent = suggestion;
searchSuggestions.appendChild(li);
});
}
function clearSuggestions() {
searchSuggestions.innerHTML = '';
}
function searchGoogle() {
const searchTerm = searchInput.value.trim();
if (searchTerm.length > 0) {
window.location.href = `https://www.google.com/search?q=${searchTerm}`;
}
}
function searchBing() {
const searchTerm = searchInput.value.trim();
if (searchTerm.length > 0) {
window.location.href = `https://www.bing.com/search?q=${searchTerm}`;
}
}
function searchYahoo() {
const searchTerm = searchInput.value.trim();
if (searchTerm.length > 0) {
window.location.href = `https://search.yahoo.com/search?p=${searchTerm}`;
}
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/Qjo 著作权归作者所有。请勿转载和采集!