html搜索框,韩国VPS搭建网站服务器推荐购买,便宜欧洲vps,vps租用资费,tiktokvps

🗣 Wd提问: html搜索框

🤖 Ai回答:
我来为您提供几种HTML搜索框的实现方式：

1、基础搜索框

html
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8
<meta name=viewport content=width=device-width, initial-scale=1.0
<title搜索框示例</title
<style
.search-container {
margin: 20px;
text-align: center;
}

.search-box {
padding: 10px 15px;
font-size: 16px;
border: 2px solid ddd;
border-radius: 25px;
width: 300px;
outline: none;
transition: border-color 0.3s;
}

.search-box:focus {
border-color: 4CAF50;
}

.search-btn {
padding: 10px 20px;
background-color: 4CAF50;
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
margin-left: 10px;
font-size: 16px;
}

.search-btn:hover {
background-color: 45a049;
}
</style
</head
<body
<div class=search-container
<input type=text class=search-box placeholder=请输入搜索关键词...
<button class=search-btn搜索</button
</div
</body
</html

2、带图标的搜索框

html
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8
<meta name=viewport content=width=device-width, initial-scale=1.0
<title带图标搜索框</title
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css
<style
.search-wrapper {
position: relative;
width: 400px;
margin: 50px auto;
}

.search-input {
width: 100%;
padding: 12px 20px 12px 45px;
border: 2px solid e1e1e1;
border-radius: 30px;
font-size: 16px;
outline: none;
transition: all 0.3s;
}

.search-input:focus {
border-color: 4CAF50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.search-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: 999;
}

.clear-btn {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: 999;
cursor: pointer;
font-size: 18px;
display: none;
}
</style
</head
<body
<div class=search-wrapper
<i class=fas fa-search search-icon</i
<input type=text class=search-input placeholder=搜索内容..、id=searchInput
<button class=clear-btn id=clearBtn×</button
</div

<script
const searchInput = document.getElementById('searchInput');
const clearBtn = document.getElementById('clearBtn');

// 显示/隐藏清除按钮
searchInput.addEventListener('input', function() {
if (this.value) {
clearBtn.style.display = 'block';
} else {
clearBtn.style.display = 'none';
}
});

// 清除输入内容
clearBtn.addEventListener('click', function() {
searchInput.value = '';
this.style.display = 'none';
searchInput.focus();
});
</script
</body
</html

3、自动补全搜索框

html
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8
<meta name=viewport content=width=device-width, initial-scale=1.0
<title自动补全搜索框</title
<style
.autocomplete-container {
position: relative;
width: 400px;
margin: 50px auto;
}

.autocomplete-input {
width: 100%;
padding: 12px 20px;
border: 2px solid ddd;
border-radius: 8px;
font-size: 16px;
outline: none;
}

.autocomplete-input:focus {
border-color: 4CAF50;
}

.suggestions-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid ddd;
border-top: none;
border-radius: 0 0 8px 8px;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
display: none;
}

.suggestion-item {
padding: 12px 20px;
cursor: pointer;
border-bottom: 1px solid f0f0f0;
}

.suggestion-item:hover,
.suggestion-item.active {
background-color: f5f5f5;
}

.search-btn {
margin-top: 10px;
padding: 12px 25px;
background-color: 4CAF50;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
width: 100%;
}
</style
</head
<body
<div class=autocomplete-container
<input type=text class=autocomplete-input id=searchInput placeholder=输入搜索关键词...
<div class=suggestions-list id=suggestionsList</div
<button class=search-btn onclick=performSearch()搜索</button
</div

<script
const searchInput = document.getElementById('searchInput');
const suggestionsList = document.getElementById('suggestionsList');

// 模拟数据
const searchData = [
'JavaScript',
'Java',
'Python',
'React',
'Vue.js',
'Angular',
'Node.js',
'HTML',
'CSS',
'Bootstrap',
'jQuery',
'TypeScript'
];

let currentFocus = -1;

// 输入事件处理
searchInput.addEventListener('input', function() {
const value = this.value.toLowerCase();
currentFocus = -1;

if (!value) {
suggestionsList.style.display = 'none';
return;
}

const filteredData = searchData.filter(item =
item.toLowerCase().includes(value)
);

displaySuggestions(filteredData);
});

// 键盘导航
searchInput.addEventListener('keydown', function(e) {
const items = suggestionsList.getElementsByClassName('suggestion-item');

if (e.keyCode === 40) { // 向下箭头
currentFocus++;
addActive(items);
} else if (e.keyCode === 38) { // 向上箭头
currentFocus;
addActive(items);
} else if (e.keyCode === 13) { // 回车键
e.preventDefault();
if (currentFocus -1 && items) {
items[currentFocus].click();
} else {
performSearch();
}
}
});

function addActive(items) {
if (!items) return false;

removeActive(items);

if (currentFocus = items.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (items.length 1);

items[currentFocus].classList.add('active');
}

function removeActive(items) {
for (let i = 0; i < items.length; i++) {
items[i].classList.remove('active');
}
}

function displaySuggestions(suggestions) {
suggestionsList.innerHTML = '';

if (suggestions.length === 0) {
suggestionsList.style.display = 'none';
return;
}

suggestions.forEach((item, index) = {
const div = document.createElement('div');
div.className = 'suggestion-item';
div.textContent = item;
div.addEventListener('click', () = {
searchInput.value = item;
suggestionsList.style.display = 'none';
});
suggestionsList.appendChild(div);
});

suggestionsList.style.display = 'block';
}

// 点击外部关闭建议列表
document.addEventListener('click', function(e) {
if (e.target !== searchInput) {
suggestionsList.style.display = 'none';
}
});

function performSearch() {

Ai作答

📣 商家广告：