Question

我有一个脚本，该脚本获取JSON数据并将其用于创建Title + Image列表。所有项目均在装载时显示。

我想创建一个搜索框，以便在您键入时仅向您显示匹配的搜索框。

随着Ajax获取JSON，它已经在适当的标签中包含了细节。因此，我尝试在标签周围放置

标签，以便可以在
上使用一些教程。 https://www.w3schools.com/howto/howto_js_filter_lists.asp。但这只会缩小并压缩列表。而且它没有搜索

这是检索的部分：

 $(document).ready(function(){
  $.ajax({
    url://gets from here,
    type: 'GET',
    dataType: "json",
    success: listThemAll
  });
});

然后执行listThemAll函数，该函数将json放入数组中：

function listThemAll(info){
  var titleName = [];
  var picLink = [];
  //some more vars
  $.each(info, function(index, value){
    picLink.push(value.imageLink);
    titleName.push(value.nameTitle);
   //some more pushed
  });
  //length (total entries) determined

然后将其长度中的每个项目都用HTML标记包裹。

    for (i = 0; i < length; i++) {
    var image = '<div class="... > + pickLink[i] + ... </div>'; //here is where I tried to add <li></li> tags

，并且标题也是如此。

所以我的问题是，是否可以仅使用HTML和Javascript通过搜索栏过滤这些内容？我该如何修改呢？因此，如果我搜索“骑士”，则应显示以“骑士”开头的结果

谢谢

Answer 1

是的，有可能。在输入元素中，您需要一个onchange事件（或onkeydown）事件的事件处理程序。用户输入内容时，您应该获得value的搜索输入，并根据输入值过滤选项列表。

是的，正如评论中所说，很多人以前已经完成过多次相同的任务，请随时查看他们的代码。

如何通过搜索过滤通过ajax填充的列表？

1 个答案: