javascript - 从数组JavaScript动态创建列表

我需要从数组创建列表。
我传递一个输入值，并使用找到的所有匹配项重新创建列表。
如果没有匹配项，我需要显示“无结果”消息。


inputValue =“ Ja”返回杰克和杰克
inputValue =“ Jak”返回杰克
inputValue =“ foo”返回“没有结果”

var arr = [{"name": "Jack"}, {"name": "Jake"}];
var txtName = document.querySelector("#txtName");

txtName.addEventListener('keyup', function(e){
  arr.forEach(function(item){
    if(item.name.toLowerCase().indexOf(txtName.value) > -1){
        myList.innerHTML +=
        `<li>${item.name}</li>`
        return
      }else{
        myList.innerHTML = `<li>No results </li>`
      }
  });
});

<input type="text" id="txtName">
<ul id="myList"></ul>

最佳答案

您只应决定在循环结束时输出“无结果”。您不知道在循环的任意迭代中输出此结果是否合适，因此您要清除可能已经输出的良好结果。

这是更正的版本：

var arr = [{"name": "Jack"}, {"name": "Jake"}];
var txtName = document.querySelector("#txtName");

txtName.addEventListener('keyup', function(e){
    var lowText = txtName.value.toLowerCase();
    var matches = arr.filter(function(item){
        return item.name.toLowerCase().indexOf(lowText) > -1;
    }).map(function (item) {
        return `<li>${item.name}</li>`;
    }).join('');
    myList.innerHTML = matches || `<li>No results </li>`;
});

<input type="text" id="txtName">
<ul id="myList"></ul>

如果要为空输入提供“无结果”而不是所有项目，则将matches的定义更改为：

var matches = lowText.length && arr.filter( // ...etc

关于javascript - 从数组JavaScript动态创建列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47519738/