11ty中的搜索功能

Question

我正在基于这个教程在11个站点上构建一个基本的搜索功能。我的问题是，当我输入表单并提交它时，即使我在代码中包含了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/

代码沙箱：链接

Answer 1

调试代码后，我发现这一行是罪魁祸首。

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

在此中，您将检查在if条件下是否有任何值为false，然后返回 false 或未定义的，并且您的输入未定义，这就是为什么您的整个函数被计算为if返回flase值的false信标&因为您的下一行没有被执行。

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

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

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

加上这个

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

这是工作示例