May 4, 2019

Javascript Challenge #9: Autocomplete Search

By Krishnaa JavaScript Questions 0 Comments

This is another challenge for you guys. Its pretty simple and easy to achieve. Please try it on your own first, then watch whole video.

const fruits = ['Apple', 'Orange', 'Mango', 'Watermelon', 'Kiwi', 'Banana', 'Grapes'];


document.getElementById('search').addEventListener('input', (e)=>{

    let fruitsArray = [];
    
    if(e.target.value){
        fruitsArray = fruits.filter(fruit => fruit.toLowerCase().includes(e.target.value));
        fruitsArray = fruitsArray.map(fruit => `<li>${fruit}</li>`)
    }

    showFruitsArray(fruitsArray);
});

function showFruitsArray(fruitsArray){
    const html = !fruitsArray.length ? '' : fruitsArray.join('');
    document.querySelector('ul').innerHTML = html;
}

You May Also Like: