javascript - 如何防止搜索显示整个 JSON 数据库？

我正在尝试学习如何使用搜索。我发现了几个不同的版本，但它们都有类似的问题。当您搜索 JSON 数据库，然后退格或删除搜索字母/单词时，它将显示整个 JSON 文件。我想知道是否有办法防止这种情况，所以如果您退格、删除搜索词或删除搜索，它不会显示类似于页面最初加载时的任何内容？我很想了解如何解决这个问题，因为我想如果可行的话我可以弄清楚我正在从事的项目的其余部分。我正在查看的 HTML 和 Javascript 代码是:

<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | Search HTML Table Data by using JQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  #result {
   position: absolute;
   width: 100%;
   max-width:870px;
   cursor: pointer;
   overflow-y: auto;
   max-height: 400px;
   box-sizing: border-box;
   z-index: 1001;
  }
  .link-class:hover{
   background-color:#f1f1f1;
  }
  </style>
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:900px;">
   <h2 align="center">JSON Live Data Search using Ajax JQuery</h2>
   <h3 align="center">Employee Data</h3>   
   <br /><br />
   <div align="center">
    <input type="text" autocomplete="off" name="search" id="search" placeholder="Search Employee Details" class="form-control" />
   </div>
   <ul class="list-group" id="result"></ul>
   <br />
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $.ajaxSetup({ cache: false });
 $('#search').keyup(function(){
  $('#result').html('');
  $('#state').val('');
  var searchField = $('#search').val();
  var expression = new RegExp(searchField, "i");
  $.getJSON('test.json', function(data) {
   $.each(data, function(key, value){
   // if (value.name.search(expression) != -1 || value.location.search(expression) != -1)
    if (value.name.search(expression) != -1)
    {
     $('#result').append('<li class="list-group-item link-class"><img src="'+value.image+'" height="40" width="40" class="img-thumbnail" /> '+value.name+' | <span class="text-muted">'+value.location+'</span></li>');
    }
   });   
  });
 });

 $('#result').on('click', 'li', function() {
  var click_text = $(this).text().split('|');
  $('#search').val($.trim(click_text[0]));
  $("#result").html('');
 });
});
</script>

JSON 文件是(所有图像都不起作用，但这与问题无关):

[
  {
    "name":"Angel Lewis",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/0d4/2f7/07a3d35.jpg",
    "location":"Seattle, WA"
  },
  {
    "name":"Justin Dean",
    "image": "https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAAIMAAAAJGExNTE4OWY4LWU4ODMtNDA2ZS1iNWI1LWNkYmIyOWMyMGQ5Zg.jpg",
    "location":"Muscatine, IA"
  },
  {
    "name":"Nora Blake",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/005/0b8/118/387e091.jpg",
    "location":"Seattle, WA"
  },
  {
    "name":"Russell Fox",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/000/084/26e/2d9e05b.jpg",
    "location":"Albuquerque, NM"
  },
  {
    "name":"Daryl Bradley",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/042/0ad/197566e.jpg",
    "location":"Buckeystown, MD"
  },
  {
    "name":"Benjamin Gonzales",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/8/005/0b2/1c9/2a423c1.jpg",
    "location":"Atlanta, GA"
  },
  {
    "name":"Viola Francis",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAASJAAAAJGMyMTUzN2EyLTExY2ItNDZiNS1hMTY1LTI4NDA2NDMwZmFkNg.jpg",
    "location":"Zanesville, OH"
  },
  {
    "name":"Reginald Benson",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/1/000/10f/3cc/275a407.jpg",
    "location":"Gilbert, AZ"
  },
  {
    "name":"Glenda Ray",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/8/005/0ac/1ca/07c25a2.jpg",
    "location":"Baltimore, MD"
  },
  {
    "name":"Paula Vargas",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/5/005/03e/073/36a5c47.jpg",
    "location":"Baltimore, MD"
  },
  {
    "name":"Mark Armstrong",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/5/005/010/09b/39b122d.jpg",
    "location":"Hallandale Beach, FL"
  },
  {
    "name":"Jaime Campbell",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAATUAAAAJDJkY2Q1Mzk0LTI1YzItNDFhNy04ZmQ0LWY3NzZlZTZlNGVmYw.jpg",
    "location":"Zanesville, OH"
  },
  {
    "name":"Mike Beck",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/000/01c/0d4/2b69e7c.jpg",
    "location":"Garner, NC"
  },
  {
    "name":"Ann Lowe",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/7/000/1f6/019/29cd853.jpg",
    "location":"Cabin John, MD"
  },
  {
    "name":"Ryan Wolfe",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/1/000/0bf/335/05a57f6.jpg",
    "location":"Los Angeles, CA"
  },
  {
    "name":"Dwayne Gutierrez",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/29b/028/2426536.jpg",
    "location":"San Jose, CA"
  },
  {
    "name":"Bill Burke",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/7/000/1bc/12e/1423106.jpg",
    "location":"Bakersfield, CA"
  }
]

最佳答案

在从输入字段检索值之前，请清除结果。因此，在检索该值后，如果 trim 后的值为空，只需提前返回，就不会显示任何内容:

var searchField = $('#search').val();
if (!searchField.trim()) {
  return;
}

const data = [{
    "name": "Angel Lewis",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/0d4/2f7/07a3d35.jpg",
    "location": "Seattle, WA"
  },
  {
    "name": "Justin Dean",
    "image": "https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAAIMAAAAJGExNTE4OWY4LWU4ODMtNDA2ZS1iNWI1LWNkYmIyOWMyMGQ5Zg.jpg",
    "location": "Muscatine, IA"
  },
  {
    "name": "Nora Blake",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/005/0b8/118/387e091.jpg",
    "location": "Seattle, WA"
  },
  {
    "name": "Russell Fox",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/000/084/26e/2d9e05b.jpg",
    "location": "Albuquerque, NM"
  },
  {
    "name": "Daryl Bradley",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/042/0ad/197566e.jpg",
    "location": "Buckeystown, MD"
  },
  {
    "name": "Benjamin Gonzales",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/8/005/0b2/1c9/2a423c1.jpg",
    "location": "Atlanta, GA"
  },
  {
    "name": "Viola Francis",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAASJAAAAJGMyMTUzN2EyLTExY2ItNDZiNS1hMTY1LTI4NDA2NDMwZmFkNg.jpg",
    "location": "Zanesville, OH"
  },
  {
    "name": "Reginald Benson",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/1/000/10f/3cc/275a407.jpg",
    "location": "Gilbert, AZ"
  },
  {
    "name": "Glenda Ray",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/8/005/0ac/1ca/07c25a2.jpg",
    "location": "Baltimore, MD"
  },
  {
    "name": "Paula Vargas",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/5/005/03e/073/36a5c47.jpg",
    "location": "Baltimore, MD"
  },
  {
    "name": "Mark Armstrong",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/5/005/010/09b/39b122d.jpg",
    "location": "Hallandale Beach, FL"
  },
  {
    "name": "Jaime Campbell",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAATUAAAAJDJkY2Q1Mzk0LTI1YzItNDFhNy04ZmQ0LWY3NzZlZTZlNGVmYw.jpg",
    "location": "Zanesville, OH"
  },
  {
    "name": "Mike Beck",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/000/01c/0d4/2b69e7c.jpg",
    "location": "Garner, NC"
  },
  {
    "name": "Ann Lowe",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/7/000/1f6/019/29cd853.jpg",
    "location": "Cabin John, MD"
  },
  {
    "name": "Ryan Wolfe",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/1/000/0bf/335/05a57f6.jpg",
    "location": "Los Angeles, CA"
  },
  {
    "name": "Dwayne Gutierrez",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/29b/028/2426536.jpg",
    "location": "San Jose, CA"
  },
  {
    "name": "Bill Burke",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/7/000/1bc/12e/1423106.jpg",
    "location": "Bakersfield, CA"
  }
];


$('#search').keyup(function() {
  $('#result').html('');
  $('#state').val('');
  var searchField = $('#search').val();
  if (!searchField.trim()) {
    return;
  }
  var expression = new RegExp(searchField, "i");
  $.each(data, function(key, value) {
    // if (value.name.search(expression) != -1 || value.location.search(expression) != -1)
    if (value.name.search(expression) != -1) {
      $('#result').append('<li class="list-group-item link-class"><img src="' + value.image + '" height="40" width="40" class="img-thumbnail" /> ' + value.name + ' | <span class="text-muted">' + value.location + '</span></li>');
    }
  });
});

$('#result').on('click', 'li', function() {
  var click_text = $(this).text().split('|');
  $('#search').val($.trim(click_text[0]));
  $("#result").html('');
});

#result {
  position: absolute;
  width: 100%;
  max-width: 870px;
  cursor: pointer;
  overflow-y: auto;
  max-height: 400px;
  box-sizing: border-box;
  z-index: 1001;
}

.link-class:hover {
  background-color: #f1f1f1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br /><br />
<div class="container" style="width:900px;">
  <h2 align="center">JSON Live Data Search using Ajax JQuery</h2>
  <h3 align="center">Employee Data</h3>
  <br /><br />
  <div align="center">
    <input type="text" autocomplete="off" name="search" id="search" placeholder="Search Employee Details" class="form-control" />
  </div>
  <ul class="list-group" id="result"></ul>
  <br />
</div>

如果您还想在显示所有员工时不显示结果，请先过滤数组，然后仅在过滤后的数组长度不等于原始数组长度时才显示结果:

  const peopleToShow = data.filter(({ name }) => pattern.test(name));
  if (peopleToShow.length === data.length) {
    return;
  }
  for (const value of peopleToShow) {
      $('#result').append('<li class="list-group-item link-class"><img src="' + value.image + '" height="40" width="40" class="img-thumbnail" /> ' + value.name + ' | <span class="text-muted">' + value.location + '</span></li>');
  }

const data = [{
    "name": "Angel Lewis",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/0d4/2f7/07a3d35.jpg",
    "location": "Seattle, WA"
  },
  {
    "name": "Justin Dean",
    "image": "https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAAIMAAAAJGExNTE4OWY4LWU4ODMtNDA2ZS1iNWI1LWNkYmIyOWMyMGQ5Zg.jpg",
    "location": "Muscatine, IA"
  },
  {
    "name": "Nora Blake",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/005/0b8/118/387e091.jpg",
    "location": "Seattle, WA"
  },
  {
    "name": "Russell Fox",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/000/084/26e/2d9e05b.jpg",
    "location": "Albuquerque, NM"
  },
  {
    "name": "Daryl Bradley",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/042/0ad/197566e.jpg",
    "location": "Buckeystown, MD"
  },
  {
    "name": "Benjamin Gonzales",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/8/005/0b2/1c9/2a423c1.jpg",
    "location": "Atlanta, GA"
  },
  {
    "name": "Viola Francis",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAASJAAAAJGMyMTUzN2EyLTExY2ItNDZiNS1hMTY1LTI4NDA2NDMwZmFkNg.jpg",
    "location": "Zanesville, OH"
  },
  {
    "name": "Reginald Benson",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/1/000/10f/3cc/275a407.jpg",
    "location": "Gilbert, AZ"
  },
  {
    "name": "Glenda Ray",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/8/005/0ac/1ca/07c25a2.jpg",
    "location": "Baltimore, MD"
  },
  {
    "name": "Paula Vargas",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/5/005/03e/073/36a5c47.jpg",
    "location": "Baltimore, MD"
  },
  {
    "name": "Mark Armstrong",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/5/005/010/09b/39b122d.jpg",
    "location": "Hallandale Beach, FL"
  },
  {
    "name": "Jaime Campbell",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAATUAAAAJDJkY2Q1Mzk0LTI1YzItNDFhNy04ZmQ0LWY3NzZlZTZlNGVmYw.jpg",
    "location": "Zanesville, OH"
  },
  {
    "name": "Mike Beck",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/000/01c/0d4/2b69e7c.jpg",
    "location": "Garner, NC"
  },
  {
    "name": "Ann Lowe",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/7/000/1f6/019/29cd853.jpg",
    "location": "Cabin John, MD"
  },
  {
    "name": "Ryan Wolfe",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/1/000/0bf/335/05a57f6.jpg",
    "location": "Los Angeles, CA"
  },
  {
    "name": "Dwayne Gutierrez",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/29b/028/2426536.jpg",
    "location": "San Jose, CA"
  },
  {
    "name": "Bill Burke",
    "image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/7/000/1bc/12e/1423106.jpg",
    "location": "Bakersfield, CA"
  }
];


$('#search').keyup(function() {
  $('#result').html('');
  $('#state').val('');
  const searchString = $('#search').val().trim();
  if (!searchString) {
    return;
  }
  const pattern = new RegExp(searchString, "i");
  const peopleToShow = data.filter(({ name }) => pattern.test(name));
  if (peopleToShow.length === data.length) {
    return;
  }
  for (const value of peopleToShow) {
      $('#result').append('<li class="list-group-item link-class"><img src="' + value.image + '" height="40" width="40" class="img-thumbnail" /> ' + value.name + ' | <span class="text-muted">' + value.location + '</span></li>');
  }
});

$('#result').on('click', 'li', function() {
  var click_text = $(this).text().split('|');
  $('#search').val($.trim(click_text[0]));
  $("#result").html('');
});

#result {
  position: absolute;
  width: 100%;
  max-width: 870px;
  cursor: pointer;
  overflow-y: auto;
  max-height: 400px;
  box-sizing: border-box;
  z-index: 1001;
}

.link-class:hover {
  background-color: #f1f1f1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br /><br />
<div class="container" style="width:900px;">
  <h2 align="center">JSON Live Data Search using Ajax JQuery</h2>
  <h3 align="center">Employee Data</h3>
  <br /><br />
  <div align="center">
    <input type="text" autocomplete="off" name="search" id="search" placeholder="Search Employee Details" class="form-control" />
  </div>
  <ul class="list-group" id="result"></ul>
  <br />
</div>

关于javascript - 如何防止搜索显示整个 JSON 数据库？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60367826/

javascript - 如何防止搜索显示整个 JSON 数据库？

上一篇：javascript - 为什么我的 Controller 没有被导出？

下一篇：javascript - 如何在 TypeScript 中将 API 请求的响应转换为带有 `class-transformer` 的类实例？