I am currently working on implementing a search feature that will locate data based on the user's query. Specifically, I want to create a search bar in my HTML that can search for book titles stored in my database accessible through GET requests. Although I have successfully retrieved an array from the database, I am now focused on enabling searches by title.
var xhttp = new XMLHttpRequest();
const books_url = "http://127.0.0.1:3000/books"
xhttp.open("GET", books_url, true);
xhttp.addEventListener('load', function() {
function bookSearch() {
var search = document.getElementById('searchBar').value
document.getElementById('booksFound').innerHTML = ""
console.log('Looking for ' + search)
console.log('Search button works')
}
document.getElementById('searchBtn').addEventListener('click', bookSearch, false)
document.getElementById("divShowBooks").innerHTML = this.responseText;
console.log(xhttp);
console.log(this.response);
});
xhttp.send();
This is the HTML code where I have set up the search bar and its display:
<section class="bookSearchBar">
<h4>Search Books</h4>
<form method="GET" id="searchBooks" class="form-inline md-form form-sm active-pink-2 mt-2">
<input id="searchBar" class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search by Title" aria-label="Search">
<button id="searchBtn" type="button">Submit</button>
<i class="fas fa-search" aria-hidden="true"></i>
</form>
<div id="booksFound"></div>
</section>
Please let me know if you require additional information.
UPDATE: Re-posted with a clearer title for better understanding.