javascript - 11ty 中的搜索功能

Question

我正在基于此 tutorial 在 11ty 站点上构建基本搜索功能.我的问题是当我输入表单并提交它时，它会将我带到另一个站点，即使我在代码中包含了 preventDefault()。我是否错过了这些步骤，或者是否有更好的方法将此功能实现到网站中？

这是我的代码和演示站点的链接:

(function (window, document, undefined) {
    'use strict';
    let form = document.querySelector('#form-search');
    let input = document.querySelector('#search-input');
    let resultList = document.querySelector('#search-results');

    /**
     * Create the HTML for each result
     * @param  {Object} article The article
     * @param  {Number} id      The result index
     * @return {String}         The markup
     */
    let createHTML = function (article, id) {
        let html =
            '<div id="search-result-' + id + '">' +
                '<a href="' + article.url + '">' +
                    '<aside>' +
                        article.date +
                    '</aside>' +
                    '<h2>' + article.title + '</h2>' +
                    article.summary.slice(0, 150) + '...<br>' +
                    article.url +
                '</a>' +
            '</div>';
        return html;
    };

    /**
     * Create the markup when no results are found
     * @return {String} The markup
     */
    let createNoResultsHTML = function () {
        return '<p>Sorry, no matches were found.</p>';
    };

    /**
     * Create the markup for results
     * @param  {Array} results The results to display
     * @return {String}        The results HTML
     */
    let createResultsHTML = function (results) {
        let html = '<p>Found ' + results.length + ' matching articles</p>';
        html += results.map(function (article, index) {
            return createHTML(article, index);
        }).join('');
        return html;
    };

    /**
     * Search for matches
     * @param  {String} query The term to search for
     */
    let search = function (query) {

        // Variables
        let reg = new RegExp(query, 'gi');
        let priority1 = [];
        let priority2 = [];

        // Search the content
        searchIndex.forEach(function (article) {
            if (reg.test(article.title)) return priority1.push(article);
            if (reg.test(article.blogTitle)) priority2.push(article);
        });

        // Combine the results into a single array
        let results = [].concat(priority1, priority2);

        // Display the results
        resultList.innerHTML = results.length < 1 ? createNoResultsHTML() : createResultsHTML(results);

    };

    /**
     * Handle submit events
     */
    let submitHandler = function (event) {
        event.preventDefault();
        search(input.value);
    };

    // Make sure required content exists
    if (!form || !input || !resultList || !searchIndex) return;

    // Create a submit handler
    form.addEventListener('submit', submitHandler);

})(window, document);

<section id="hero">
    <div class="container">
        <div class="hero-buttons">
        <h1 class="blog-header">11ty Search Demo</h1>
        <form action="https://duckduckgo.com/" method="get" id="form-search">
            <input class="search-input" placeholder="Search here..." />
            <input type="hidden" name="sites" value="https://11ty-search-demo.netlify.app/">
            <button class="submit-search">Search</button>
        </form>
        <div id="search-results"></div>
        </div>
    </div>
</section>

<section id="blog">
    <div class="container">
        {%- for post in collections.post | reverse -%} {% include
        'recent-snippet.njk' %} {%- endfor -%}
    </div>
</section>

演示链接:https://11ty-search-demo.netlify.app/

代码沙箱:Link

Answer 1

在调试你的代码后我发现这一行是罪魁祸首

// Make sure required content exists
    if (!form || !input || !resultList || !searchIndex) return;

在此你要检查如果条件是否为假则返回 false 或 undifined 并且你的input 是未定义的，这就是为什么你的整个函数被评估为 false 因为如果返回 flase 值&因为你的下一行没有被执行

// Create a submit handler
    form.addEventListener('submit', submitHandler);

这就是您的表单被提交的原因。但是为什么你的输入是未定义的，因为你使用了错误的选择器而不是 id 它是 class 例如。而不是这个

let input = document.querySelector('#search-input');

添加这个

let input = document.querySelector('.search-input');

这里正在工作example