通过输入文本反应过滤对象数组和通过按钮点击进行类别选择
是一个常见的前端开发需求，可以通过以下步骤实现：
- 创建一个包含对象的数组，每个对象包含需要过滤的属性。例如，可以创建一个包含商品信息的数组，每个商品对象包含名称、类别、价格等属性。
- 在前端页面中，创建一个输入框和一个按钮，用于输入过滤关键字和进行类别选择。
- 监听输入框的变化事件，当用户输入关键字时，获取输入的文本。
- 使用JavaScript的filter()方法对对象数组进行过滤。根据用户输入的关键字，筛选出包含该关键字的对象。可以使用JavaScript的includes()方法来判断对象属性是否包含关键字。
- 根据用户选择的类别，使用JavaScript的filter()方法对已过滤的对象数组进行二次筛选。只显示符合选定类别的对象。
- 将过滤后的对象数组渲染到页面上，展示给用户。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>对象数组过滤和类别选择</title>
</head>
<body>
<input type="text" id="filterInput" placeholder="输入关键字">
<button onclick="filterObjects()">筛选</button>
<select id="categorySelect" onchange="filterObjects()">
<option value="">全部类别</option>
<option value="电子产品">电子产品</option>
<option value="家居用品">家居用品</option>
<option value="服装">服装</option>
</select>
<ul id="filteredObjects"></ul>
<script>
const objects = [
{ name: 'iPhone 12', category: '电子产品', price: 6999 },
{ name: 'MacBook Pro', category: '电子产品', price: 12999 },
{ name: '智能手表', category: '电子产品', price: 999 },
{ name: '沙发', category: '家居用品', price: 2999 },
{ name: '餐桌', category: '家居用品', price: 1999 },
{ name: 'T恤', category: '服装', price: 99 },
{ name: '牛仔裤', category: '服装', price: 199 },
];
function filterObjects() {
const keyword = document.getElementById('filterInput').value.toLowerCase();
const category = document.getElementById('categorySelect').value;
const filtered = objects.filter(obj => {
const nameMatch = obj.name.toLowerCase().includes(keyword);
const categoryMatch = category === '' || obj.category === category;
return nameMatch && categoryMatch;
});
const filteredList = document.getElementById('filteredObjects');
filteredList.innerHTML = '';
filtered.forEach(obj => {
const li = document.createElement('li');
li.textContent = `${obj.name} - ￥${obj.price}`;
filteredList.appendChild(li);
});
}
</script>
</body>
</html>在上述示例中，我们创建了一个包含商品信息的对象数组，并在页面上创建了一个输入框和一个按钮用于过滤对象数组。还创建了一个下拉菜单用于选择类别。通过监听输入框和下拉菜单的变化事件，调用filterObjects()函数进行过滤和类别选择操作。最后，将过滤后的对象数组渲染到页面上的一个无序列表中。
这个示例中没有涉及到云计算相关的内容，因此无需提供腾讯云相关产品和产品介绍链接地址。
相关·内容
1回答
代码示例：
在上面的StackBlitz示例中，我尝试从搜索输入中过滤项目列表，并通过按钮按类别过滤。我已经在搜索输入和一个按钮切换的情况下工作了，但我正在努力使其有条件地与多个类别选择一起工作。我一直在想一个表达式，它按照searchText以及类别选择的所有组合进行过滤。
浏览 16提问于2020-05-21得票数 0
我有一个循环组件，由一个函数运行，用于根据输入和选择进行过滤。我能得到由这个过滤器渲染的元素的反应式数量吗？v-for="(item, index) in itemsFilters()" :key="index" :propId="item.id"itemsFilter()通过选择和
浏览 12提问于2018-02-01得票数 1
回答已采纳
我有困难，让一个特定的Angularjs过滤设置工作，涉及文本输入，ng重复和选择，并喜欢任何帮助任何人可以提供。我通过文本输入过滤数组，如下所示：
<div ng-repeat="person in people | filter : searchText目前，这将为“任意”属性值的人员<em
浏览 1提问于2015-07-30得票数 4
回答已采纳
1回答
我使用反应-光擦拭-画廊为一个组合页面渲染一些图像。此外，我做了一个无限滚动功能，所以它最初只加载10项。现在，它基于按钮工作，并添加了10项onClick，但我计划将其更改为滚动。在此之前，所有工作都按预期进行，这就是图片库和画卷的工作方式： const [galleryItems, setGalleryItems] =从我在控制台中选中的内容来看，我的目标是正确的事物，类别被正确地设置。它只在没有选择的情况下工作-通
浏览 7提问于2022-01-07得票数 0
2回答
相当不错，但是它缺少的一个特性是点击到下拉的所有可用选项。您可以通过设置MinimumPrefixLength=0来结束--这样，用户就可以通过删除文本获得完整的下拉列表。不过，这有几个限制：
看
浏览 3提问于2014-08-19得票数 0
回答已采纳
我有多个下拉过滤器，如位置，类别，子类别等。我的最初版本是工作的，无论哪个组合被选择，它将返回正确的结果。我的下一个挑战是使用多重选择使下拉列表。我正为此使用防火墙，试图在客户端进行复杂的筛选。true, category: "Food", price: 2} 为了通过多个值进
浏览 20提问于2021-09-11得票数 0
回答已采纳
“items”支柱输入到我的“RadiosBlock”组件中： <RadiosBlock const categoryFilter = props.items.filter( )onClick={() => clickHandler(item)}
&
浏览 3提问于2022-09-19得票数 0
回答已采纳
1回答
我为javascript对象数组构建了一个搜索函数，大致如下：使用内置在objectarray[i].text.search(userstring)>=0){
浏览 1提问于2012-05-01得票数 2
回答已采纳
我在mysql中有30个类别。我有450个子类别，它们与另一个表中的30个类别有关。类别表动物，动物，宠物，鹦鹉N_ xxx _ xxxid _ ref _ title _关键词2_1犬、拉布拉多犬、戈尔德猎犬我需要实现文本字段的过滤器。如果用户在文本字段中输入labrador，则在关键字
浏览 7提问于2012-09-08得票数 1
回答已采纳
1回答
我正在使用jQuery和Phonegap创建一个安卓和Phonegap应用程序，其中的一个部分旨在帮助用户找到到日本位置的地图图钉。这些引脚分为类别和子类别(如美国基地>>陆军、海军、海军或空军)。我想为用户提供一个屏幕，可以通过常规文本输入字段和选择/下拉菜单(见下面的图像；相关代码也在本文末尾提供)使用listview中的引脚进行过滤。在这里可以找到一个截
浏览 1提问于2015-01-03得票数 1
回答已采纳
我有一个UITableViewController，它使用一个简单的SearchBar来过滤结果。我使用了一个包含名称和类别的糖果数组，并将这些类别用作我的SearchBar的作用域栏的选项。我有一个实用程序函数来应用过滤器： //= nil)}
我在searchDispla
浏览 3提问于2014-11-07得票数 0
回答已采纳
1回答
我根据对象名称过滤数据数组。然后，这将使用用户通过按钮选择的对象进行setState。这是可行的，所有的对象都会在没有问题的情况下改变。我无法解决的问题是，我想要的是使用一个与类别关联的对象嵌套数组来setState onClick。因此，每个类别对象都有一个嵌套的subCategory数组，该数组包含许多su
浏览 0提问于2018-03-07得票数 2
回答已采纳
1回答
我有一个从可观察数组创建的表。表行包含属于一组类别中的每个类别的元素。要根据类别筛选表格，需要使用一行按钮。按钮可以是活动的，也可以是非活动的，通过一个通过knockout绑定的CSS类来表示：
<button data-bind="click: filter.filterCategory, css: { filterOn: filter.category.isFiltered() }">Filter</
浏览 2提问于2014-02-08得票数 2
现在，我有一个回收视图，有两个类别的项目，活动上有三个按钮，按“全部”、“设计类别”和“开发类别”对它们进行过滤。单击按钮时，仅显示该类别的项目。我还有一个搜索栏，可以按名称过滤结果。在搜索栏中键入内容并过滤结果后，如果单击分类按钮，则会显示该类别的所有项目，而不是仅显示与搜索的名称匹配的项目。我目前唯一的解决方案是在单击按钮时清除搜索栏，但我想
浏览 1提问于2019-08-14得票数 0
2回答
我使用三个字符串数组--十个问题、十个答案和十个提示，从一个文本文件中读取。出现一个按钮，要求用户选择另一个类别，重新填充数组，并以新的问题、答案和提示重新开始。我是否在ViewDidLoad中声明数组并初始化它们，在游戏过程中删除对象并添加新对象，然后在dealloc中释放它们？或者我每次都通过循环分配和释放它们？
浏览 0提问于2011-12-04得票数 0
回答已采纳
我只想知道，如何通过postman客户端使用createTrackInJSON(Track track)注释将JSON对象发送到@Post方法。在这里，如何通过@Post注释将JSON对象传递给createTrackInJSON( track )方法？
浏览 4提问于2015-03-31得票数 34
回答已采纳
1回答
有没有什么css样式可以用来使角度材质输入类似于按钮？需要这样做的原因如下： 1. datepicker which is embedded inusing a slider由于datepicker不能通过点击<em
浏览 19提问于2019-08-01得票数 0
回答已采纳
2回答
我的控制器有三个动作:介绍、索引和类别。在我的母版页中，我有一个文本框和一个搜索按钮。一般的想法是，用户到达介绍视图，然后在文本框中键入文本并单击search按钮。然后，他看到了Index视图，而查询字符串保存了一个值，用户看到的数据将根据该值进行过滤。用户可以选择一个类别，然后被重定向到类别视图。当我在Introduction、Index和ca
浏览 0提问于2011-01-06得票数 0
回答已采纳
我想写一个相当简单的内容应用程序，显示一个文本项目的列表(以及一个小图片)。当然，使用一个ListActivity并在加载每个类别时替换其适配器的数据会更有意义。
我关心的是何时按下"back“。适配器加载了当前类别的项目，现在我需要显示前一个
浏览 0提问于2010-05-31得票数 0
回答已采纳
如何通过单击react页面中的按钮来更改文本内容？我计划对内容进行分类，但我的内部有5个独立的组件，我不知道如何使其更简单import React from 'react'每个组件包含两个
浏览 0提问于2019-07-18得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
