JSFiddle - React, Tailwind, and code Playground

by BeNdErR

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 resultsFor;
var matches;
	
	
$("#ingredient-search").on("keyup", function() {
    
    $(".append").empty();
    if($("#ingredient-search").val() != ""){
		
        resultsFor = $('.results-for');
            
        resultsFor.html($(this).val());
        
        for(var x = 0; x < ingredients.length; x++){
            if(ingredients[x].indexOf(($("#ingredient-search").val()).toLowerCase()) == 0)
               $(".append").append(ingredients[x]+"<br>");
        }
    }
	    
    
		
});