Html Question posted in
Some basic documentation can be found here.

HTML Search button not searching when hitting enter

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    You’ve write some js code with html otherwise its not will be work .
    you can implemented the code

    here is the Html code : <form id="searchForm" action="/your-search-endpoint" method="GET">

    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);
    });

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search