Return to Answer

document.addEventListener("DOMContentLoaded", function (event) {
  const clients = new Clients(fetchWhateverThatDataIs());
  const clientsList = document.getElementById("clientsList");
  const search = document.getElementById("search");

  if (clients.isEmpty()) {
    clientsList.innerHTML = '<li>No clients were found.</li>';
    return;
  }

  clientsList.innerHTML = clients.HtmlList();

  search.addEventListener("keyup", clients.filter);

});

document.addEventListener("DOMContentLoaded", function (event) {
  const clients     = new Clients(fetchWhateverThatDataIs());
  const clientsList = document.getElementById("clientsList");
  const search      = document.getElementById("search");

  if (clients.isEmpty()) {
    clientsList.innerHTML = '<li>No clients were found.</li>';
    return;
  }

  clientsList.innerHTML = clients.HtmlList();

  search.addEventListener("keyup", clients.filter);

});

Objects organize then simplify client code

Objects organize functionality then simplify client code

function Clients (theClients) {
  this.clients = theClients ? theClients : [];
  
  this.isEmpty = function() { return this.clients.length === 0; }

  this.HtmlList = function () {
     return this.clients.map((element) =>
        '<li><a href="/clients/view/' + element.id + '">' + element.name + '</a></li>'
    ).join("");
  } //HtmlList

  // intended as an event handler
  this.filter = function (event) {
    clients.filter((value) =>           
      value.name.toLowerCase().includes(event.target.value.toLowerCase()) ||
      value.code.toLowerCase().includes(event.target.value.toLowerCase())
    ).map((element) =>
       '<li><a href="/clients/view/' + element.id + '">' + element.name + '</a></li>').join("");
  } //filter

} //Clients

document.addEventListener("DOMContentLoaded", function (event) {
  const clients = new Clients(fetchWhateverThatDataIs());
  const clientsList = document.getElementById("clientsList");
  const search = document.getElementById("search");

  if (clients.isEmpty()) {
    clientsList.innerHTML = '<li>No clients were found.</li>';
    return;
  }

  clientsList.innerHTML = clients.HtmlList();

  search.addEventListener("keyup", clients.filter);
}

});

function Clients (theClients) {
  this.clients = theClients ? theClients : [];
  
  this.isEmpty = function() { return this.clients.length === 0; }

  this.HtmlList = function () {
     return this.clients.map((element) =>
        '<li><a href="/clients/view/' + element.id + '">' + element.name + '</a></li>'
    ).join("");
  } //HtmlList

  // intended as an event handler
  this.filter = function (event) {
    this.clients.filter((value) =>           
      value.name.toLowerCase().includes(event.target.value.toLowerCase()) ||
      value.code.toLowerCase().includes(event.target.value.toLowerCase())
    ).map((element) =>
       '<li><a href="/clients/view/' + element.id + '">' + element.name + '</a></li>').join("");
  } //filter

} //Clients

document.addEventListener("DOMContentLoaded", function (event) {
  const clients = new Clients(fetchWhateverThatDataIs());
  const clientsList = document.getElementById("clientsList");
  const search = document.getElementById("search");

  if (clients.isEmpty()) {
    clientsList.innerHTML = '<li>No clients were found.</li>';
    return;
  }

  clientsList.innerHTML = clients.HtmlList();

  search.addEventListener("keyup", clients.filter); 

});