At Sodium Halogen, we’ve made several search fields, but thought it would be good to document an output. Here we go with just the Javascript part…

data + search + filtering data = awesome

const movies = [
  { title: "101 Dalmations", genre: "Disney, Dog", rating: "G" },
  { title: "102 Dalmations", genre: "Dog", rating: "G" },
  { title: "5 Children and It", genre: "SciFi", rating: "G" },
  { title: "Aladdin", genre: "Disney, Adventure", rating: "G" },
  { title: "All Dogs Go to Heaven", genre: "Dog", rating: "G" },
  { title: "Anastasia", genre: "Princess", rating: "G" },
  { title: "Aristocats", genre: "Disney, Animal", rating: "G" },
  {
    title: "Aussie and Teds Great Adventure",
    genre: "Adventure, Dog",
    rating: "G",
  },
  { title: "Babe", genre: "Drama, Animal", rating: "G" },
];

// Fuzzy Search >> source: https://stackoverflow.com/a/15252131/3979495
String.prototype.fuzzy = function (s) {
  var hay = this.toLowerCase(),
    i = 0,
    n = -1,
    l;
  s = s.toLowerCase();
  for (; (l = s[i++]); ) if (!~(n = hay.indexOf(l, n + 1))) return false;
  return true;
};

// state variable
const search = "Dsy";

const moviesFound = movies.filter((movie) =>
  Object.keys(movie)
    .map((key) => movie[key].fuzzy(search))
    .reduce((acc, bool) => (bool ? acc + 1 : acc))
);

console.log(moviesFound);

pen: https://codepen.io/chancesmith/pen/RdEeva?editors=1111