Question

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

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

感谢任何帮助。

Answer 1

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

在你的代码中添加一个简单的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，则会将该空字符串作为输出，从而清除搜索结果。

Answer 2

您可以根据以下内容添加验证：

filterValue != ""

如果为true，则更改搜索

如果为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>

Answer 3

问题是，如果没有输入任何内容或删除所有内容，则不会删除内部HTML。

您需要的是，只需添加

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

在代码的末尾，这应该可行

Answer 4

问题在于这一行：

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

当您搜索空字符串（.indexOf()）时，

0会返回""。因此if中的条件将始终为真，输出将显示characters数组的所有条目。

如果for不为空（空字符串），则必须添加“guard”才能输入filterValue循环。

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>

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

4 个答案: