JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<input class="description form-control" type="text" value="" onkeyup="itemSearch(this.value)" />
<ul id="content" class="searchResult"></ul>

JavaScript

var items = [{
  "id": 1,
  "created_at": "2021-01-21T15:17:10.000000Z",
  "updated_at": "2021-01-21T15:17:10.000000Z",
  "name": "Second Shooter",
  "description": "<p>Second photography for your big day!<\/p>",
  "price": 300,
  "user_id": "bf677ce2-2e77-4ffb-9ba9-7cdcaf6f2d02"
}, {
  "id": 2,
  "created_at": "2021-01-21T16:33:37.000000Z",
  "updated_at": "2021-01-21T16:33:37.000000Z",
  "name": "All Day Coverage",
  "description": "<p>All Coverage of your big day<\/p>",
  "price": 1500,
  "user_id": "bf677ce2-2e77-4ffb-9ba9-7cdcaf6f2d02"
}, {
  "id": 3,
  "created_at": "2021-01-21T16:33:58.000000Z",
  "updated_at": "2021-01-21T16:33:58.000000Z",
  "name": "12x12 Album",
  "description": "<p>Beautiful 12x12 wedding album<\/p>",
  "price": 600,
  "user_id": "bf677ce2-2e77-4ffb-9ba9-7cdcaf6f2d02"
}];

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function itemSearch(input) {

  var searchField = "name";
  var searchVal = input;

  var results = items.filter(result => result.name.match(RegExp(input, "i")));

  console.log(results)
}