I am building a basic search functionality on an 11ty site based on this tutorial. My problem is when I type the form and submit it, it will take me to another site even though I included preventDefault()
in the code. Did I miss out on the steps or is there are better ways of implementing the feature into the site?
Here's my code and link to a demo site:
(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>
Demo link: https://11ty-search-demo.netlify.app/
Code Sandbox: Link
After debugging the code, the issue was traced to the following line:
if (!form || !input || !resultList || !searchIndex) return;
In this segment, you are checking whether any of the values in the if
condition are false
. If that's the case, the function will either return false
or undefined
. The problem arises because your input
variable is undefined
, causing the entire function to evaluate as false
. Consequently, the subsequent line of code fails to execute:
form.addEventListener('submit', submitHandler);
This unexecuted line is responsible for handling the form submission. As a result, your form is being submitted unexpectedly.
The reason behind the input
variable being undefined
lies in the selector you used. Instead of using an id
, you mistakenly used a class
selector. For instance, you used this:
let input = document.querySelector('#search-input');
However, it should be like this:
let input = document.querySelector('.search-input');
This corrected selector targets the element with the class name search-input
, ensuring that the input
variable receives the intended element.
To visualize the solution in action, you can refer to this functional example.