javascript – How can you keep the search from displaying the whole JSON database?-ThrowExceptions

Exception or error:

I’m trying to learn how to work with searches. I have a few different versions I found, but they all have a similar problem. When you do a search of a JSON database and then you backspace or delete the search letters/words, it will show the entire JSON file. I’m wondering if there is a way to prevent this so if you backspace, remove a search word, or delete the search it won’t display anything like when the page is initially loaded? I’d love to understand how to fix this issue because I think I could figure out the rest of the project I’m working on if this works. The HTML and Javascript code I’m looking at is:

<!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>

The JSON file is (none of the images work, but that’s not relevant to the problem):

[
  {
    "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"
  }
]
How to solve:

Right before you retrieve the value from the input field, you clear the results. So, after you retrieve the value, if the trimmed value is empty, simply return early, and nothing will be displayed:

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>

If you also want to display no results when all employees would be displayed, filter the array first, then only display results if the filtered array’s length is not equal to the original array’s length:

  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>

Leave a Reply

Your email address will not be published. Required fields are marked *