JS - 输入搜索在没有值时返回数组中的所有对象答案

【问题标题】：JS - input search returns all objects in array when no valueJS - 输入搜索在没有值时返回数组中的所有对象
【发布时间】：2018-04-09 12:35:01
【问题描述】：

我希望确保当输入字段为空时，不会返回任何结果。现在，如果您输入一个名称，然后删除所有文本，您将在数组中获得所有结果。

const characters = [{
    first_name: "Abraham",
    last_name: "Lincoln",
    img: "https://upload.wikimedia.org/wikipedia/commons/a/ab/Abraham_Lincoln_O-77_matte_collodion_print.jpg"
  },
  {
    first_name: "Johnny",
    last_name: "Bravo",
    img: "https://ia.media-imdb.com/images/M/MV5BYTg4MDkwODgtYTBlNy00Yjc2LTg4NTYtZGE5YmFhYjY5NzU2XkEyXkFqcGdeQXVyNTM3MDMyMDQ@._V1_.jpg"
  },
  {
    first_name: "Barney",
    last_name: "Rubble",
    img: "https://upload.wikimedia.org/wikipedia/en/e/e2/Barney_Rubble.png"
  }
];

let searchInput = document.getElementById('searchInput');
searchInput.addEventListener('keyup', filterNames);

function filterNames() {
  let filterValue = document.getElementById('searchInput').value.toUpperCase();
  let output = '';

  for (let i = 0; i < characters.length; i++) {
    let firstName = characters[i].first_name.toUpperCase();
    if (firstName.indexOf(filterValue) > -1) {
      output +=
        '<div class="card">' +
        '<div class="img-container text-center">' +
        '<img src="' + characters[i].img + '" width=180 height=180 />' +
        '</div>' +
        '<div class="text-center">' +
        '<h5>' + characters[i].first_name + ' ' + characters[i].last_name + '</h5>' +
        '</div>' +
        '</div>';
    }
  }
  document.getElementById('characters').innerHTML = output
};

.card {
  display: inline-block;
  margin-right: 12px;
  float: left;
}

<div>
  <input type="text" id="searchInput" placeholder="Who are you looking for?" />
</div>

<div id="characters"></div>

Demo on jsfiddle

感谢任何帮助。

【问题讨论】：

提供您的 HTML
只需一步一步地检查您的代码。您的代码的哪一部分与输出（循环）有关？它什么时候会输出任何东西，必须满足什么条件（searchInput 必须是first_name 的一部分）？当您有一个空字符串作为“搜索输入”时检查该条件的各个部分（"foo".indexOf("") 的输出是什么？）。

标签： javascript arrays search

【解决方案1】：

您可以根据以下条件添加验证：

filterValue != ""

如果为真，则更改搜索

如果为 false，则清理内容

希望这会有所帮助:)

const characters = [{
    first_name: "Abraham",
    last_name: "Lincoln",
    img: "https://upload.wikimedia.org/wikipedia/commons/a/ab/Abraham_Lincoln_O-77_matte_collodion_print.jpg"
  },
  {
    first_name: "Johnny",
    last_name: "Bravo",
    img: "https://ia.media-imdb.com/images/M/MV5BYTg4MDkwODgtYTBlNy00Yjc2LTg4NTYtZGE5YmFhYjY5NzU2XkEyXkFqcGdeQXVyNTM3MDMyMDQ@._V1_.jpg"
  },
  {
    first_name: "Barney",
    last_name: "Rubble",
    img: "https://upload.wikimedia.org/wikipedia/en/e/e2/Barney_Rubble.png"
  }
];

let searchInput = document.getElementById('searchInput');

searchInput.addEventListener('keyup', filterNames);

function filterNames() {
  let filterValue = document.getElementById('searchInput').value.toUpperCase();
  let output = '';

  if (filterValue != "") {
    for (let i = 0; i < characters.length; i++) {
      let firstName = characters[i].first_name.toUpperCase();
      if (firstName.indexOf(filterValue) > -1) {
        output +=
          '<div class="card">' +
          '<div class="img-container text-center">' +
          '<img src="' + characters[i].img + '" width=180 height=180 />' +
          '</div>' +
          '<div class="text-center">' +
          '<h5>' + characters[i].first_name + ' ' + characters[i].last_name + '</h5>' +
          '</div>' +
          '</div>';
      }
    }
    document.getElementById('characters').innerHTML = output
  } else {
    document.getElementById('characters').innerHTML = "";
  }

};

input {width:50%;margin-bottom:12px;}
.card {display:inline-block;margin-right:12px;float:left;}
.img-container {border:1px solid #000000;}
.text-center {text-align:center;}

<div>
  <input type="text" id="searchInput" placeholder="Who are you looking for?"/>
</div>

<div id="characters"></div>

【讨论】：

【解决方案2】：

问题是在没有输入任何内容或删除所有内容的情况下，您不会删除内部 HTML。

你需要的是，只需添加

if(filterValue ==""){
    document.getElementById('characters').innerHTML  = ""
 }

在您的代码末尾，这应该可以工作

【讨论】：

TO 是... -> let output = ''; ... document.getElementById('characters').innerHTML = output

【解决方案3】：

你的问题是你需要一些代码来清空你的搜索结果。

在代码周围添加一个简单的 if 语句，然后将其清空即可：

let searchInput = document.getElementById('searchInput');
searchInput.addEventListener('keyup', filterNames);

function filterNames() {
    let filterValue = document.getElementById('searchInput').value.toUpperCase();
    let output = '';

    if (filterValue) {
      for (let i = 0; i < characters.length; i++) {
          let firstName = characters[i].first_name.toUpperCase();

          if (firstName.indexOf(filterValue) > -1) {
              output +=
                  '<div class="card">' +
                  '<div class="img-container text-center">' +
                  '<img src="' + characters[i].img + '" width=180 height=180 />' +
                  '</div>' +
                  '<div class="text-center">' +
                  '<h5>' + characters[i].first_name + ' ' + characters[i].last_name + '</h5>' +
                  '</div>' +
                  '</div>';
          }
        }
    }

    document.getElementById('characters').innerHTML = output
};

由于您将output 默认为空字符串，如果您没有filterValue，则该空字符串将作为您的输出，清除您的搜索结果。

【讨论】：

"那么该空字符串将作为您的输出，清除您的搜索结果" - 这将是预期的结果，但如果每个项目都为空 searchInput显示来自characters。
不应该加上我添加的if (filterValue)。区别在于没有它，那么空字符串总是会在任何其他字符串中找到，所以你会得到所有结果。使用if 语句，您不会进入for 循环，因此您将绕过整个事情。
“那么空字符串总是会在任何其他字符串中找到” 这应该是你答案的第一部分。向 TO 解释为什么他/她的脚本不能按预期工作，然后才给出可行的解决方案。 :)
我更喜欢相反的方式。展示工作代码，然后解释为什么代码工作通常更容易让人们理解。
但我没有看到任何解释为什么它在您的答案中不起作用。第一句是完全错误的，因为已经有代码可以“清空”搜索结果，但是由于“错误”，当searchInput 为空字符串时总会有结果。

【解决方案4】：

问题出在这一行：

if (firstName.indexOf(filterValue) > -1) {

.indexOf() 在搜索空字符串 ("") 时返回 0。因此if 中的条件将始终为真，输出将显示characters 数组的所有条目。

如果filterValue 不为空（空字符串），您必须添加一个“守卫”才能进入for 循环。

if (filterValue.length > 0) {
    for (let i = 0; i < characters.length; i++) {
        // ...
    }
}

const characters = [{
    first_name: "Abraham",
    last_name: "Lincoln",
    img: "https://upload.wikimedia.org/wikipedia/commons/a/ab/Abraham_Lincoln_O-77_matte_collodion_print.jpg"
  },
  {
    first_name: "Johnny",
    last_name: "Bravo",
    img: "https://ia.media-imdb.com/images/M/MV5BYTg4MDkwODgtYTBlNy00Yjc2LTg4NTYtZGE5YmFhYjY5NzU2XkEyXkFqcGdeQXVyNTM3MDMyMDQ@._V1_.jpg"
  },
  {
    first_name: "Barney",
    last_name: "Rubble",
    img: "https://upload.wikimedia.org/wikipedia/en/e/e2/Barney_Rubble.png"
  }
];

let searchInput = document.getElementById('searchInput');
searchInput.addEventListener('keyup', filterNames);

function filterNames() {
  let filterValue = document.getElementById('searchInput').value.toUpperCase();
  let output = '';

  if (filterValue.length > 0) {
    for (let i = 0; i < characters.length; i++) {
      let firstName = characters[i].first_name.toUpperCase();
      if (firstName.indexOf(filterValue) > -1) {
        output +=
          '<div class="card">' +
          '<div class="img-container text-center">' +
          '<img src="' + characters[i].img + '" width=180 height=180 />' +
          '</div>' +
          '<div class="text-center">' +
          '<h5>' + characters[i].first_name + ' ' + characters[i].last_name + '</h5>' +
          '</div>' +
          '</div>';
      }
    }
  }
  document.getElementById('characters').innerHTML = output
};

.card {
  display: inline-block;
  margin-right: 12px;
  float: left;
}

<div>
  <input type="text" id="searchInput" placeholder="Who are you looking for?" />
</div>

<div id="characters"></div>

【讨论】：

这是一个很好的答案。非常感谢！