商品查询案例能够帮助用户按照预设的条件快速的查询商品信息,实现的思路主要是当用户输入指定的价格区间和商品名称后,单击页面中的搜索按钮,页面会展示符合当前条件下的商品信息。
时间: 2024-02-11 21:05:18 浏览: 130
是的,商品查询案例可以帮助用户按照预设的条件快速查询商品信息。下面是实现思路的简要描述:
1. 创建一个包含商品信息的数组。
2. 监听搜索按钮的点击事件。
3. 在搜索按钮的点击事件处理程序中,获取用户输入的价格区间和商品名称。
4. 使用`filter()`方法筛选商品数组,只保留价格在指定区间内并且名称包含用户输入的字符串的商品。
5. 使用`forEach()`方法遍历筛选后的商品数组,将每个商品的信息显示在页面上。
以下是一个简单的示例代码:
HTML:
```
<input type="text" id="search-name" placeholder="请输入商品名称">
<input type="text" id="search-min-price" placeholder="最低价格">
<input type="text" id="search-max-price" placeholder="最高价格">
<button id="search-btn">搜索</button>
<div id="results"></div>
```
JavaScript:
```
var products = [
{ name: "iPhone", price: 1000 },
{ name: "Macbook", price: 1500 },
{ name: "Chair", price: 50 },
{ name: "Table", price: 100 }
];
function displayResults(results) {
var container = $("#results");
container.empty();
if (results.length === 0) {
container.text("没有找到符合条件的商品。");
} else {
results.forEach(function(product) {
container.append("<div>" + product.name + " - $" + product.price + "</div>");
});
}
}
$("#search-btn").click(function() {
var name = $("#search-name").val().toLowerCase();
var minPrice = parseFloat($("#search-min-price").val());
var maxPrice = parseFloat($("#search-max-price").val());
var results = products.filter(function(product) {
return product.price >= minPrice && product.price <= maxPrice &&
product.name.toLowerCase().indexOf(name) !== -1;
});
displayResults(results);
});
```
在这个示例中,我们使用`filter()`方法来筛选商品,然后使用自定义的`displayResults()`函数来将结果显示在页面上。当用户输入无效的价格区间或商品名称时,我们会显示相应的提示信息。
阅读全文