写出一个网页客户端代码 带商品搜索功能
时间: 2024-03-27 19:38:16 浏览: 54
好的,以下是一个简单的示例代码,使用HTML、CSS和JavaScript实现商品搜索功能的网页客户端:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品搜索</title>
<style>
/* 样式表 */
#search-form {
margin: 20px;
}
#search-input {
width: 300px;
padding: 10px;
font-size: 16px;
}
#search-button {
padding: 10px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#search-results {
margin: 20px;
}
</style>
</head>
<body>
<form id="search-form">
<label for="search-input">搜索商品:</label>
<input type="text" id="search-input">
<button type="submit" id="search-button">搜索</button>
</form>
<div id="search-results"></div>
<script>
// JavaScript代码
const searchForm = document.getElementById('search-form');
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');
searchForm.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交事件
const searchText = searchInput.value.trim(); // 获取搜索文本并去除首尾空格
if (!searchText) {
searchResults.innerHTML = ''; // 如果搜索文本为空,则清空搜索结果
return;
}
// TODO: 发送搜索请求并处理返回结果,将结果渲染到searchResults中
});
</script>
</body>
</html>
```
这个网页客户端包含一个表单,一个文本框和一个搜索按钮。当用户在文本框中输入搜索文本并点击搜索按钮时,会阻止表单默认提交事件,获取搜索文本并发送搜索请求。你可以在`TODO`注释处添加发送搜索请求的代码,并将搜索结果渲染到`searchResults`元素中。