Untitled

const input = document.querySelector('#fruit');

const suggestions = document.querySelector('.suggestions ul');

const searchWrapper = document.querySelector('#search-wrapper');

const fruit = ['Apple', 'Apricot', 'Avocado 🥑', 'Banana', 'Bilberry', 'Blackberry', 'Blackcurrant', 'Blueberry', 'Boysenberry', 'Currant', 'Cherry', 'Coconut', 'Cranberry', 'Cucumber', 'Custard apple', 'Damson', 'Date', 'Dragonfruit', 'Durian', 'Elderberry', 'Feijoa', 'Fig', 'Gooseberry', 'Grape', 'Raisin', 'Grapefruit', 'Guava', 'Honeyberry', 'Huckleberry', 'Jabuticaba', 'Jackfruit', 'Jambul', 'Juniper berry', 'Kiwifruit', 'Kumquat', 'Lemon', 'Lime', 'Loquat', 'Longan', 'Lychee', 'Mango', 'Mangosteen', 'Marionberry', 'Melon', 'Cantaloupe', 'Honeydew', 'Watermelon', 'Miracle fruit', 'Mulberry', 'Nectarine', 'Nance', 'Olive', 'Orange', 'Clementine', 'Mandarine', 'Tangerine', 'Papaya', 'Passionfruit', 'Peach', 'Pear', 'Persimmon', 'Plantain', 'Plum', 'Pineapple', 'Pomegranate', 'Pomelo', 'Quince', 'Raspberry', 'Salmonberry', 'Rambutan', 'Redcurrant', 'Salak', 'Satsuma', 'Soursop', 'Star fruit', 'Strawberry', 'Tamarillo', 'Tamarind', 'Yuzu'];

input.addEventListener('keyup', searchHandler);

function search(){

	let results = [];

	let inputVal = input.value;

	if(inputVal.length){let results  = fruit.filter((item) =>{return item.toLowerCase().includes(inputVal.toLowerCase());})

	console.log(results);
	
	return results;
			
	}
	
	
}
			
function searchHandler(e){

	let inputVal = e.target.value;

 	results = search();

	showSuggestions(results, inputVal);

	}
	
function showSuggestions(results, inputVal) {

	suggestions.innerHtml = "";

	results.forEach(item => {
		
		let li = document.createElement("li");
		li.textContent = item;
		suggestions.appendChild(li);

		
	});

}

function clearSuggestions(){


}

	
	// 	suggestions.appendChild(li);

	// set content to be results

	// append child

	// createElement

	// append child to suggestion

		// TODO display results list as a drop down



function useSuggestion() {
	// TODO populate the search bar with the suggestion. already added to event listener below
showSuggestions();
}

suggestions.addEventListener('click', useSuggestion);