Live Search in jQuery

by Matthew Day

HTML

<div class="y-wrap">
  <input type="text" name="search" id="search" placeholder="Search" />
  <ul id="thedata" class="items"></ul>
</div>

CSS

* {
  box-sizing: border-box;
  color: #666;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

.y-wrap {
  margin: 0 auto;
  width: 90%;
}

input {
  outline: none;
  margin: 16px 0 12px;
  padding: 8px 4px;
  width: 220px;
}

ul {
  list-style: none
}

.details div {
  display: inline-block;
  margin: 8px 0;
}

.w1 {
  width: 40px;
}

.w2 {
  width: 80px;
}

.w3 {
  width: 180px;
}

JavaScript

(function($) {
	let app = {
  	theData: [
      {
        id: 1,
        name: "Joe",
        occupation: "Garbage Man",
        age: 24,
        city: "Montreal",
        sex: "male"
      },
      {
        id: 2,
        name: "Sally",
        occupation: "Accountant",
        age: 29,
        city: "Chicago",
        sex: "female"
      },
      {
        id: 3,
        name: "Veronica",
        occupation: "Musician",
        age: 33,
        city: "Los Angeles",
        sex: "female"
      },
      {
        id: 4,
        name: "Harry",
        occupation: "Accountant",
        age: 65,
        city: "Boise",
        sex: "male"
      },
      {
        id: 5,
        name: "Yvette",
        occupation: "Customer Service Rep",
        age: 35,
        city: "Montreal",
        sex: "female"
      },
      {
        id: 6,
        name: "Ana",
        occupation: "Socialite",
        age: 57,
        city: "Cape Cod",
        sex: "female"
      },
      {
        id: 7,
        name: "Karen",
        occupation: "Soccer Mom",
        age: 37,
        city: "Austin",
        sex: "female"
      },
      {
        id: 8,
        name: "Gary",
        occupation: "Teacher",
        age: 41,
        city: "Charlotte",
        sex: "male"
      },
      {
        id: 9,
        name: "Jacob",
        occupation: "Garbage Man",
        age: 22,
        city: "Salt Lake City",
        sex: "male"
      },
      {
        id: 10,
        name: "Diana",
        occupation: "Advertising Executive",
        age: 44,
        city: "New York City",
        sex: "female"
      }
    ],
  	init: function() {
    	app.doSearch();
    	app.loadData();
    },
    loadData: function(criteria) {
    	if(!criteria) {
      	$('#thedata').empty();
        app.theData.forEach((currentValue, index, array) => {
          // one advantage of template literals is that strings can span across multiple lines
          $('#thedata').append(`<li class='details'>
                        ...