使用`keyup`从已经显示在我的html上的‘`.json’文件中进行过滤/搜索
答案：
keyup是一个JavaScript事件，它在释放键盘上的键时触发。通过使用keyup事件，可以实现从已经显示在HTML页面上的.json文件中进行过滤或搜索的功能。
首先，我们需要通过JavaScript代码来获取.json文件的内容。可以使用XMLHttpRequest对象或fetch API来进行异步请求并获取数据。
接下来，可以使用keyup事件来监听用户在搜索框中输入的关键字。每次触发keyup事件时，都会执行一个函数，该函数将获取用户输入的关键字，并将其与.json文件中的数据进行比较。
以下是一个示例代码，展示了如何使用keyup事件来进行过滤或搜索操作：
<!DOCTYPE html>
<html>
<head>
<title>Filter/Search JSON Data</title>
</head>
<body>
<input type="text" id="searchInput" placeholder="Search...">
<ul id="resultList"></ul>
<script>
// 获取.json文件内容并进行过滤/搜索
function filterJSONData() {
var searchInput = document.getElementById('searchInput');
var resultList = document.getElementById('resultList');
var keyword = searchInput.value.toLowerCase(); // 将输入的关键字转为小写，以便不区分大小写进行搜索
// 使用fetch API获取.json文件内容
fetch('data.json')
.then(response => response.json())
.then(data => {
resultList.innerHTML = ''; // 清空搜索结果
// 遍历.json文件中的数据
data.forEach(item => {
// 如果数据中包含关键字，则将其添加到搜索结果中
if (item.title.toLowerCase().indexOf(keyword) !== -1) {
var li = document.createElement('li');
li.textContent = item.title;
resultList.appendChild(li);
}
});
});
}
// 监听keyup事件
var searchInput = document.getElementById('searchInput');
searchInput.addEventListener('keyup', filterJSONData);
</script>
</body>
</html>上述示例代码中，我们假设存在一个名为data.json的.json文件，其中包含一些数据，每个数据项都有一个title属性，用于表示项目的标题。
用户可以在搜索框中输入关键字，并且在每次释放键盘上的键时，都会触发filterJSONData函数。该函数会获取用户输入的关键字，并遍历.json文件中的数据，找到包含关键字的数据项，并将它们添加到一个列表中显示出来。
请注意，以上示例中的代码仅为演示目的，实际使用中可能需要根据具体情况进行修改和调整。
此外，腾讯云也提供了一些相关产品，例如：
- 腾讯云对象存储（COS）：用于存储和管理大规模数据的分布式存储服务，可以将
.json文件上传至对象存储中进行管理。了解更多信息，请访问腾讯云对象存储（COS）。 - 腾讯云云服务器（CVM）：提供虚拟的云服务器，可满足各种计算需求，包括处理和存储
.json文件。了解更多信息，请访问腾讯云云服务器（CVM）。
请注意，以上提到的腾讯云产品仅为示例，实际使用时应根据具体需求选择适当的产品。
相关·内容
我已经在这上面工作了几天了，但我没有太多的运气。我有一个json文件ReptilesTX.json与几个动物，我想有选项搜索框 ? 。然后，过滤掉已经加载的动物，只保留与搜索匹配的动物。下面是我到目前为止所尝试的，但我得到了一些错误，我不知道如何阅读来排除故障。提前感谢您的任
浏览 5提问于2021-08-09得票数 0
回答已采纳
我正在使用这个API：，它返回一个对象数组。我的HTML中有一个输入，它有一个"keyup“事件侦听器。document.getElementById('search').addEventListener('keyup', filterWizards)
目标：，我想积极搜索从API返回的对象数组，以查看名称或然后，我将过滤<
浏览 1提问于2022-04-17得票数 2
回答已采纳
我有一个刀片模板与搜索栏，它没有提交按钮，并用于过滤。但是，我似乎无法让它进行适当的过滤，因为页面最初使用的是角(已经完全删除了)。我的页面使用foreach循环显示我的所有产品，并在页面控制器中显示来自变量的信息(从数据库中提取所有内容并
浏览 1提问于2017-11-09得票数 0
回答已采纳
我已经在datatable中完成了服务器端处理。现在，我还想进行单独的列过滤服务器端处理。 var title = $(this).text(); "ajax&qu
浏览 19提问于2019-10-22得票数 0
3回答
我已经问过这个问题了，但我想它太抽象了，我得到的只是使用DataTables插件的建议，但是我想手动进行这个实时搜索。我想知道如何将关键字(以及如何创建关键字以发送)从输入框传递给findUser();函数，在每个.keyup上使用MySQL搜索查询，并刷新#theContent中显示
浏览 0提问于2014-06-10得票数 2
回答已采纳
我正在做一个使用Angular和Material Design的项目，我想使用Autocomplete让用户通过名称属性从对象列表中进行搜索。我正在读取一个JSON文件，并试图生成一个可以通过名称属性轻松搜索的对象列表。我已经创建了一个服务，它使用HTTPClient从静态应用程序接口或<em
浏览 6提问于2018-12-03得票数 1
1回答
我正在从Backbone Collection中的服务器加载一些初始数据。我设置了一个搜索输入，该输入触发对服务器的AJAX调用，并在每次键入时返回解析后的JSON。
我希望搜索只在客户端进行。到目前为止，我已经设置了这段代码(该函数在#search输入中的keyup
浏览 0提问于2013-03-19得票数 0
回答已采纳
1回答
我使用SimpleGrid创建了分页表，并从JSON数据中加载了数据。我创建了一个Search来过滤JSON数据中的值，并在分页表中显示结果。
我使用方法和Toggle方法从表中搜索数据。问题是，搜索仅适用于当前页面(搜索仅在tbody中工作)，不能从分页简单网格的<
浏览 0提问于2018-06-16得票数 0
回答已采纳
1回答
因此，我在页面上有一个搜索栏(/Search)，当用户搜索某个内容时，它将在输入文本上运行一个过滤器，并使用过滤的结果刷新页面。$(function () {
$("
浏览 0提问于2017-01-26得票数 1
1回答
多列角10的过滤表数据
、、、
我需要根据在keyup事件的输入中设置的值过滤表数据。由于有多个列，因此应相应地显示筛选过的数据。在我的html中我有下面的内容 <td *ngFor="let t of tableHeader">
浏览 0提问于2020-11-30得票数 1
回答已采纳
1回答
我已经完成了在partialView中搜索列表的部分。我在这个应用程序中有多个partialView，从图像中可以看到。所以我的问题
每当我为一个网格创建搜索过滤器时，我就必须创建另一个视图和部分视图来显示成功的结果。如何在相同的部分视图中显示筛选的搜索<
浏览 0提问于2013-10-22得票数 4
回答已采纳
在浏览器中释放CTRL+F时，我正在尝试检测CTRL键的"key up“事件。我已经尝试过了： if (e.ctrlKey){ // note that I'm not even checking我该怎么做呢？
浏览 0提问于2017-12-07得票数 0
我在页面上有一个搜索栏(/Search) &当用户搜索某个内容时，它将在输入文本上运行一个筛选器，并使用已过滤的结果刷新页面。$(function () {
$("#searchBox").keyup</
浏览 2提问于2017-01-26得票数 0
回答已采纳
1回答
关于如何获取JSON文件上的特定数据，我有问题。我正在使用烧瓶，我的意图是获取特定的数据并显示出来。例如，获取tag of greetings和它们的patterns和responses。此时，我只需显示我的intents.json的所有信息，但我需要特定的
浏览 4提问于2022-03-10得票数 -1
回答已采纳
当使用带有remote选项的Type预报/血犬时，当本地/预取结果在“限制”(5)下时，所显示的建议与输入无关。看起来就像它只是显示从顶部的结果设置为5。照片：“爱”是预期的结果，其他一切都是无关的：我的代码： {"value": "Ambient"}, {"value&qu
浏览 3提问于2015-01-29得票数 4
回答已采纳
我是AJAX和很多JS的新手，但我需要在Laravel站点上替换一些旧的角功能。
我们只是有一个静态/粘性标题搜索栏的页面，但没有提交按钮。它需要在搜索输入时做一个活的过滤器。Laravel刀片/HTML是使用来自控制器数据的foreach循环构建的，但更重要的是，数据存储在一个名为orderFormData
浏览 1提问于2017-11-13得票数 0
回答已采纳
2回答
我已经使用Ajax jQuery实时搜索JSON数据，并且我想调用多个JSON文件进行搜索。 在页面的开头，如果输入为空，则不会显示结果。但是，如果您再次在输入中写入和删除文本，则会显示所有结果。当输入再次为空时，我想再次隐藏所有结果。 提前谢谢你。HTML输入： <div class=
浏览 17提问于2020-09-13得票数 0
回答已采纳
1回答
我的Symfony2 project.This中有一个基本但功能强大的搜索机制，它将使用Doctrine2 (如expression.But )向用户查询和显示数据，我希望通过添加Ajax功能来使数据更加我在控制器中添加了一些Ajax代码，但我不知道如何使它成为一个没有显示结果的work.The图像加载器。</td>
<td>
浏览 4提问于2015-08-26得票数 0
回答已采纳
1回答
我试图在jquery搜索中使用count来查找在向搜索栏输入名称后从json文件中获得结果时找到的总匹配数。目前，我只得到1个匹配显示后，每个单独的结果，而不是在搜索中的总匹配数量。我是不是漏掉了什么？谢谢$(document).ready(f
浏览 2提问于2018-11-27得票数 0
我目前正在测试文本输入的行为，它在输入搜索词时对keyup事件上的列表进行过滤。TypeSearchInput(string searchTerm) txtSearchInput.Click();}
它成功地在输入中添加了搜索项，但没有启动筛选，因为没有模拟keyup事件(因此列表没有被
浏览 6提问于2021-12-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
