JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" placeholder="Search ingredients..." id="ingredient-search" />
<div class="append"></div>
JavaScript
var ingredients = ["cheese", "chicken", "cherries", "chick peas", "potato"]
var input = $('#ingredient-search');
var value = input.val();
var resultsDiv = '<div class="ingredient-search-results"><h2>Results for "<span class="results-for"></span>"</h2></div>';
var pressed = false;
var resultsFor;
var matches;
$("#ingredient-search").on("keyup", function() {
if(pressed == false ){
$('.append').append(resultsDiv);
}
pressed = true;
resultsFor = $('.results-for');
resultsFor.html($(this).val());
if (jQuery.inArray(resultsFor.html(), ingredients) != -1) {
alert(resultsFor.html() + ' is in the array!');
}
});