Javascript 根据搜索字段中的输入从JSON返回项目数据

我对JS/jQuery非常陌生，一直在努力为我正在构建的网站添加一些搜索功能

基本上，我已经建立了一个简单的搜索字段（#artist_search），我试图使用它通过一个通过GET连接的JSON进行搜索：

const jsonconnect = {
    "async": true,
    "crossDomain": true,
    "url": "http://localhost:8888/Template/json/test.json",
    "method": "GET",
    };

    $.ajax(jsonconnect).done(function (response) {
    console.log(response);
    })

这个GET将把我的JSON内容输出到控制台中。例如，以下是JSON中存在的部分内容和部分响应：

[ ...
{
  "Artist": "Eminem",
  "Title": "The Slim Shady LP",
  "Format": "2xLP, Album, RE, 180"
},
{
  "Artist": "Deafheaven",
  "Title": "New Bermuda",
  "Format": "2xLP, Album, Ltd, Pal"
},
{
  "Artist": "Aphex Twin",
  "Title": "Selected Ambient Works 85-92",
  "Format": "2xLP, Album, RE, RM"
}...]

然后，我尝试从响应中获取数据并将其传递到keyup函数中，该函数将在DIV（#search_result）中输出结果，但我不断收到“response undefined”错误（我确信这还存在其他问题）：

因此，我尝试在最初的$.ajax（jsonconnect）.done调用中创建一个名为recordCollection的const，但该const似乎不存在于该函数之外。也就是说，如果我试图将它插入.keyup（function（））中，作为recordCollection.forEach（item…等），我会得到相同的未定义错误

---

我感觉很失落，只是不确定如何继续。基本上，如果用户搜索匹配的艺术家姓名，我想做的是返回JSON中某个项目的结果。例如，如果有人搜索“Eminem”，他们将收到（例如）返回的“Eminem-纤细的Shady LP-2xLP，Album，RE，180”同样，本资料非常新，因此非常感谢您提供的任何帮助（尽可能简单地解释）。

响应范围在.done（）中，因此您将无法在外部访问它。如果您想访问keyup事件上的ajax响应，您需要声明一个全局变量并在.done（）中设置它

然后您可以使用下面的代码来显示记录

如果每个作者只需要一条记录。您可以使用

Array.prototype.find

函数。如果作者有多条记录，它将显示第一次出现

$("#artist_search").keyup (function() {
  let result = ajaxResponse.find(x => x.Artist === $(this).val());
  $("#search_result").html(result ? `${result.Title} - ${result.Format}` : 'No matches');
});

如果每个作者需要多条记录，则需要使用

Array.prototype.filter

$("#artist_search").keyup (function() {
  let result = ajaxResponse.filter(x => x.Artist === $(this).val()).map(y => `${y.Title} - ${y.Format}`);
  $("#search_result").html(result.length > 0  ? result  : 'No matches');
});

每个作者有多条记录的工作示例： 我在作者Eminem的示例数据中添加了多条记录。如果搜索“Eminem”，将显示多条记录。

让ajax响应=[{
“艺术家”：“阿姆”，
“标题”：“苗条的树荫LP”，
“格式”：“2xLP，相册，RE，180”
},
{
“艺术家”：“阿姆”，
“标题”：“测试标题”，
“格式”：“测试格式”
},
{
“艺术家”：“Deafhaven”，
“标题”：“新百慕大”，
“格式”：“2xLP，唱片有限公司，Pal”
},
{
“艺术家”：“Aphex双胞胎”，
“标题”：“选定环境工程85-92”，
“格式”：“2xLP、相册、RE、RM”
}];
$（“#艺术家搜索”）.keyup（函数（）{
让result=ajaxsresponse.filter（x=>x.Artist===$（this.val（））.map（y=>`${y.Title}-${y.Format}`）；
$（“#搜索结果”）.html（result.length>0？结果：“无匹配项”）；
})；

这非常有帮助。您帮助缓解了长期以来的头痛问题。非常感谢。您的第一个建议是：每个作者一条记录可以完美地工作。不过，我对多条记录的建议有一些问题，即结果返回为“未定义”知道原因吗？我已经添加了用于多记录搜索的工作代码。请记住搜索区分大小写。如果搜索“eminem”而不是“eminem”，它将显示“不匹配！”。如果要忽略区分大小写，可以将文本转换为大写或小写。类似于。ajaxResponse.filter（x=>x.Artist.toUpperCase（）===$（this.val（）.toUpperCase（））太棒了。这让一切变得更容易理解。再次感谢您，非常感谢您的帮助。

$("#artist_search").keyup (function() {
  let result = ajaxResponse.find(x => x.Artist === $(this).val());
  $("#search_result").html(result ? `${result.Title} - ${result.Format}` : 'No matches');
});

$("#artist_search").keyup (function() {
  let result = ajaxResponse.filter(x => x.Artist === $(this).val()).map(y => `${y.Title} - ${y.Format}`);
  $("#search_result").html(result.length > 0  ? result  : 'No matches');
});