I have implemented a search button onto my index.html but every time I hit enter on a search the page just refreshes and doesn’t search the correct term or similar terms.
INDEX.HTML SEARCH CODE
<form>
<input type="text" name="search" placeholder="Search Content...">
</form>
CSS snippet
/*SEARCH BAR - MAIN PAGE - START--------------------------------------------------------------------------- */
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 1.5px;
font-size: 20px;
background-color: #F3F3F3;
background-image: 'searchicon.png';
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
/*SEARCH BAR END--------------------------------------------------------------------------- */
}
Thank you, any help would be much appreciated.
2
Answers
It seems like you’ve created a basic search form in your HTML with an input field. However, the issue you’re facing might be related to the lack of an action attribute in your form tag, which is necessary for defining where the form data should be sent for processing.
If you’re searching on an array this would help.
You’ve write some js code with html otherwise its not will be work .
you can implemented the code
here is the js code :
document.getElementById(‘searchForm’).addEventListener(‘submit’, function(event) {
event.preventDefault(); // Prevent the default form submission
// Perform your search logic here, such as fetching search results or updating the page content
console.log(‘Searching for:’, this.elements.search.value);
});