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

Posted 2023-05-08

【中文标题】根据对搜索字段的输入从 JSON 返回项目数据

【英文标题】：Return item data from JSON based on input into search field

【发布时间】：2021-07-20 08:22:46

【问题描述】：

我是 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"
...]

Snippet of results of console.log

然后我尝试从响应中获取数据并将其传递给 keyup 函数，该函数将在 DIV (#search_result) 内输出结果，但我不断收到“响应未定义”错误（我确定那里还有其他问题吗）：

$("#artist_search").keyup (function() 
         response.forEach(item => 
            if(item.Artist == $("#artist_search")) 
                $("#search_result").html(item); 
            else $("#search_result").html("No matches!");
        );

所以我尝试在初始 $.ajax(jsonconnect).done 调用中创建一个名为 recordCollection 的常量，但该常量似乎不存在于该函数之外。意思是，如果我尝试将它插入到 .keyup (function(), as recordCollection.forEach(item ... etc) 中，我会得到相同的未定义错误。

我感觉很迷茫，只是不确定如何继续。基本上，如果用户搜索匹配的艺术家姓名，我想要做的是在 JSON 中返回项目的结果。例如，如果有人搜索“Eminem”，他们将收到“Eminem -The Slim Shady LP - 2xLP, Album, RE, 180”的（示例）返回。同样，对于此材料非常新，因此非常感谢任何帮助（尽可能简单地解释）。

【参考方案1】：

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

const jsonconnect = 
  "async": true,
  "crossDomain": true,
  "url": "http://localhost:8888/Template/json/test.json",
  "method": "GET",
;
let ajaxResponse = null; // This is the  global variable. You need to set the response
$.ajax(jsonconnect).done(function (response) 
  ajaxResponse = response;
);

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

如果每个作者只有一个记录。您可以使用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”，则会显示多条记录。

let ajaxResponse=[
  "Artist": "Eminem",
  "Title": "The Slim Shady LP",
  "Format": "2xLP, Album, RE, 180"
,

  "Artist": "Eminem",
  "Title": "Test Title",
  "Format": "Test Format"
,

  "Artist": "Deafheaven",
  "Title": "New Bermuda",
  "Format": "2xLP, Album, Ltd, Pal"
,

  "Artist": "Aphex Twin",
  "Title": "Selected Ambient Works 85-92",
  "Format": "2xLP, Album, RE, RM"
];
$("#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');
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="artist_search" />
<span id="search_result"></span>

【讨论】：

这很有帮助。您帮助缓解了长期存在的头痛。太感谢了。您的第一个建议是：每位作者的一条记录完美无缺。不过，我在多记录建议方面遇到了麻烦 - 即结果返回为“未定义”。知道为什么会这样吗？

我已经添加了多记录搜索的工作代码。请记住，搜索区分大小写。如果您搜索“eminem”而不是“Eminem”，它将显示“不匹配！”。如果要忽略区分大小写，可以将文本转换为大写或小写。像这样的东西。 ajaxResponse.filter(x => x.Artist.toUpperCase() === $(this).val().toUpperCase())

太棒了。这让一切变得更加容易理解。再次感谢您，非常感谢您的帮助。