实时Javascript筛选不起作用抛出未定义

当我在搜索栏中写东西时（从JSON测试和工作中获取数据），我希望代码返回JSON中的项目。 代码应该转到JSON，读取JSON（对象）的行，并与关键字进行比较，看看它是否包含关键字。如果包含，它将显示在项目中。它总是抛出“未定义”

它应该实时返回与关键字匹配的项目

更新

---

JSON没有将事件作为参数传递到函数中。有人知道怎么解决吗？

我认为过滤部分应该改变。 也许是这样的

var json={“items”：[{“title”：“Express”}，{“title”：“Unexpress”}]}；
//让我们来过滤它
ul=document.getElementById（“项目列表”）；
输入=document.getElementById（'filter_items'）；
变量filterItems=（事件）=>{
关键字=input.value.toLowerCase（）；
var li=“”；
var filtered_items=json.items.filter（函数（lin）{
返回lin.title.toLowerCase（）==关键字；
});
for（过滤的_项中的变量i）{
li+=“
”+过滤项[i]。标题+”
”；
}
ul.innerHTML=li；
}
input.addEventListener（'keyup'，filterItems）



在触发事件时，您没有向函数传递额外的变量，因此不清楚为什么希望填充
json

但你也不需要它——JSON的内容不会在每次事件发生时都改变，数据总是一样的。只需在页面加载时下载它，然后在下载完成后添加事件侦听器，并在不使用附加参数的情况下使用该函数
json
可以声明为全局，因此它将在范围内

我认为代码可能更有意义，如下所示：

var json = null;
$.ajax({
    'global': false,
    'crossDomain': true,
    'method': "get",
    'url': "products.json",
    'dataType': "json",
    'success': function (data) {
        json = data;
        input.addEventListener('keyup', filterItems);
    }
});

ul = document.getElementById("items-list");
input = document.getElementById('filter_items');

var filterItems = function(event){
  keyword = input.value.toLowerCase();
  var li = "";

  for (var index in json)
  {
    for (var j in json[index])
    {
      var line = json[index][j];
      var filtered_items = line.title.filter(function(lin){
        lin = lin.title.toLowerCase();
        return lin.title.indexOf(keyword) > -1;
      });
    }
  }
  li += "<li>"+filtered_items+"</li>";
  ul.innerHTML = li;
}

var json=null；
$.ajax({
“全局”：错误，
“跨域”：正确，
'方法'：“获取”，
“url”：“products.json”，
“数据类型”：“json”，
“成功”：函数（数据）{
json=数据；
input.addEventListener（'keyup'，filterItems）；
}
});
ul=document.getElementById（“项目列表”）；
输入=document.getElementById（'filter_items'）；
var filteriems=函数（事件）{
关键字=input.value.toLowerCase（）；
var li=“”；
for（json中的var索引）
{
for（json[index]中的var j）
{
var line=json[index][j]；
var filtered_items=line.title.filter（函数（lin）{
lin=lin.title.toLowerCase（）；
返回lin.title.indexOf（关键字）>-1；
});
}
}
li+=“
”+过滤项+“
”；
ul.innerHTML=li；
}

注意：false因其创建的糟糕用户体验（在请求期间锁定主浏览器UI）而被弃用。某些浏览器在您尝试使用时会发出控制台警告。但应该没有必要这样做。您应该以正确使用回调/承诺为目标。我在上面的示例中删除了它，相反（为了可靠性），在JSON下载完成之前，我们不会将事件侦听器添加到输入框中。希望它不是一个太大的文件

p.p.S.如果您发现自己将静态JSON文件替换为服务器端脚本以从数据库检索产品数据，建议您更改代码，以便在服务器上进行数据过滤-通常使用SQL查询进行过滤并仅返回真正需要的数据更有效，下载所有内容，然后使用JavaScript对其进行过滤。
行的值。title

是一个字符串，而字符串没有

.filter（）

方法。我应该更改什么？我不知道，因为过滤字符串没有意义；也许只是一个正则表达式测试？JSON并没有以参数形式将事件作为参数传递到函数中。这就是为什么我没有定义：有人知道如何解决它吗？

{
    "items": [{
        "title": "Express"
    }, {
        "title": "Unexpress"
    }]
}

var json = null;
$.ajax({
    'global': false,
    'crossDomain': true,
    'method': "get",
    'url': "products.json",
    'dataType': "json",
    'success': function (data) {
        json = data;
        input.addEventListener('keyup', filterItems);
    }
});

ul = document.getElementById("items-list");
input = document.getElementById('filter_items');

var filterItems = function(event){
  keyword = input.value.toLowerCase();
  var li = "";

  for (var index in json)
  {
    for (var j in json[index])
    {
      var line = json[index][j];
      var filtered_items = line.title.filter(function(lin){
        lin = lin.title.toLowerCase();
        return lin.title.indexOf(keyword) > -1;
      });
    }
  }
  li += "<li>"+filtered_items+"</li>";
  ul.innerHTML = li;
}