11ty 中的搜索功能

Question

我正在根据本教程在 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/

代码沙箱：链接

Answer 1

调试代码后发现问题出在下面一行：

if (!form || !input || !resultList || !searchIndex) return;

在此段中，您将检查条件中的任何值是否if为false。如果是这种情况，该函数将返回false或undefined。出现问题是因为您的input变量是undefined，导致整个函数计算为false。因此，后续的代码行无法执行：

form.addEventListener('submit', submitHandler);

该未执行的行负责处理表单提交。因此，您的表单会意外提交。

input变量背后的原因undefined在于您使用的选择器。id您没有使用，而是错误地使用了class选择器。例如，您使用了这个：

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

然而，它应该是这样的：

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

这个更正后的选择器以类名的元素为目标search-input，确保input变量接收预期的元素。

要可视化正在运行的解决方案，您可以参考此功能示例。