How to clear div when input is empty with jquery-json autocomplete?

Question

I have this code that is not mine, I do not know javascript, but I need this functionality, it is working right, as I type it will autocomplete creating li, with image and text with json, but when I delete all the input text, the li should disappear, but they are still there, I believe it is simple to solve this problem, but I do not know anything of javascript. Can someone help me? Here is the code: https://www.webslesson.info/2017/02/live-search-json-data-using-ajax-jquery.html

Answer 1

You could simply add a check to the value of the string. If it does not exist, that is !searchField, utilize return to return a (null) value and not execute the rest of the code.

$(document).ready(function(){
 $.ajaxSetup({ cache: false });
 $('#search').keyup(function(){
  $('#result').html('');
  $('#state').val('');
  var searchField = $('#search').val();
  if (!searchField) return;
  
  var expression = new RegExp(searchField, "i");
  //$.getJSON('data.json', function(data) {
   $.each(data, function(key, value){
    if (value.name.search(expression) != -1 || value.location.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('');
 });
});

var 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"
  }
];

<!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" name="search" id="search" placeholder="Search Employee Details" class="form-control" />
   </div>
   <ul class="list-group" id="result"></ul>
   <br />
  </div>
 </body>
</html>