Попытка отфильтровать выборку

Question

Я хочу отфильтровать результаты из fetch в displayConcerts с помощью функции filter .Мне не удалось получить фильт (входные данные из документа) в displayConcerts , чтобы отфильтровать по Concert.eventDateName .

Так что, если ввод«h» будет показывать только концерт с eventDateName , начинающимся с «h».

(function () {

    function createNode(element) {
        return document.createElement(element);
    }

    function append(parent, el) {
        return parent.appendChild(el);
    }

    const ul = document.getElementById('concerts');
    const url = 'https://apis.is/concerts';
    let search = document.getElementById('search');
    //-----------------------------------------------------------

    const getConcerts = () => {//get the concert data and output in console
        return fetch(url)
        .then(res => res.json())
        .then(concerts => console.log(concerts.results))
    }


    let displayConcerts = (query) => {//displays concerts in html file
        let filt = query;
        //console.log(filt);
        fetch(url)
        .then((resp) => resp.json())
        .then(function(data) {
            let concerts = data.results;
            return concerts.map(function(concert) {//   outputs images and text
                if (concert.eventDateName) {
                    let div = createNode('div'),
                    img = createNode('img'),
                    span = createNode('span');
                    img.src = concert.imageSource;
                    span.innerHTML = `${concert.eventDateName}`;
                    append(div, img);
                    append(div, span);
                    append(ul, div);
                }
            })
        })
        .catch(function(error) {
            console.log(error);
        });
    }

    //-----Filter for concert search------------------------------

    function filter() {
        let query = this.value.trim().toLowerCase();
        //console.log(query);
        getConcerts();
        displayConcerts(query);
    }





    search.addEventListener("input", filter);
    search.addEventListener("keyup", filter);

}());