尝试过滤获取

Question

我想使用 filter 函数从 displayConcerts 中的获取过滤结果。我无法在 displayConcerts 中获取过滤（来自文档的输入），以按 concert.eventDateName 进行过滤。

因此，如果输入为“ h”，则只会显示以开头的 eventDateName 的音乐会。

(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);

}());