JSFiddle - React, Tailwind, and code Playground

testing inputs for search

by Matthew Day

HTML

<form name="myForm">
  <input id="name" type="text" placeholder="name" />
  <input id="occupation" type="text" placeholder="occupation" />
  <input id="age" type="text" placeholder="age" />
  <input id="city" type="text" placeholder="city" />
  <input id="sex" type="text" placeholder="sex" />
  <input type="submit" value="Submit">
</form>

<div id="output1">
  <h3>This is what we received from the inputs</h3>
</div>

<div id="output2">
  <h3>And we narrowed it down to this:</h3>
</div>

<div id="output3">
  <h3>These are the matches we found:</h3>
</div>

JavaScript

var searchables = [
  {
    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"
  }
]

$('form').submit(function(e) {
	e.preventDefault();
  let person = {};
	person.name = $('#name').val();
  person.occupation = $('#occupation').val();
  person.age = $('#age').val();
  person.city = $('#city').val();
  person.sex = $('#sex').val();
  
  let slim;
  
  var slim = (person) => {
    let newObj = {};
    Object.keys(person).forEach((prop) => {
      if (person[prop]) { newObj[prop] = person[prop]; }
    });
    return newObj;
  };
  
  var searchCriteria = [];
  
  for (var [key, value] of Object.entries(person)) {
    if(value) {
    	searchCriteria.push({[key] : value});
    }
  }
  
 // let result = searchables.map(function(value) {
//  	searchCriteria.forEach(function(key, index) {

  //  });
//    for(let i =...