使用实时搜索进行JSON过滤

我想在网站上显示数据卡。从JSON URL检索数据。它也起作用。但是现在我想过滤这些卡片，这样我就只能看到那些与搜索输入匹配的卡片。有人能帮我吗？ 我已经尝试了几种方法，但不能再进一步了，因为我也是Javascript的初学者

我有以下代码：

var yourUrl=“myURL”；
函数Get（yourUrl）{
//通过Ajax获取JSON数据。。。
返回`[
{“link”：“alice”，“profile”：“profile1”，“profilename”：“alice”，“str”：“Allen Street”，“location”：“New York”}，
{“link”：“bob”，“profile”：“profile2”，“profilename”：“bob”，“str”：“Market St.”，“location”：“San Francisco”}
]`;
}        
var postData=JSON.parse（Get（yourUrl））；
函数append_json（数据）{
//设置模板
var s=$（“#postTemplate”）[0].innerHTML.trim（）；
var holder=document.createElement（'div'）；
holder.innerHTML=s；
var template=holder.childNodes；
var member=document.getElementById（'newprofile'）；
data.forEach（函数（对象）{
//克隆模板
var newItem=$（模板）.clone（）；
//填充它
$（newItem.find（“.memurl”）.attr（“href”，object.link）；
var img=$（newItem.find（“.thumb”）
$（img）.attr（“src”，object.image）.attr（“alt”，“$（img）.attr（“alt”）+object.profile++”等）
.attr（“title”，$（img）.attr（“title”）+object.profilename+“完成此任务”）；
$（newItem.find（“.profile”）.html（object.profile）；
$（newItem.find（“.street”）.html（object.str）；
$（newItem.find（“.location”）.html（object.location）；
//附加它
$（“.newprofile”）.append（newItem）；
});
}
$（“文档”）.ready（函数（）{
附加json（postData）；
});
.member{
边框：1px纯银；
保证金：5px；
填充物：5px；
}




最重要的问题是-要在服务器上搜索还是在客户端搜索？在服务器上搜索通常更简单、更高效，因为服务器将只返回匹配的记录，而客户端可以简单地呈现这些记录，但是，它要求您拥有某种类型的数据库，而不仅仅是一个带有JSON的平面文本文件。在客户机上搜索只适用于非常小的数据集。数据来自数据库。所以我认为在服务器上搜索是最好的。这是一个好计划。有许多示例说明如何通过jQueryAjax向服务器发送文本框值，您应该从这里开始。提示：1）使用jqueryajax而不是低级的
XMLHttpRequest
。2） 使用GET请求。3） 在服务器响应上设置阻止客户端缓存的
缓存控制
头。4） 在服务器上，如果您使用的是SQL数据库，请不要通过拼凑字符串来构建SQL。使用参数。也就是说，你的问题太广泛了。回答这个问题需要编写客户端和服务器端代码，而这些代码都不存在，以便从头构建一个完整的系统。这超出了本网站的提问范围。因此，也许从我写下的技巧开始，一步一步地向前迈进是一个好方法。在这个网站上的许多帖子中都描述了这些事情。