title: Implementing search bar functionality with AJAX and HTTP Requests - JavaScript
body: <p>I am attempting to create a search function that finds data depending on the query that is entered (so a typical search bar in my HTML). I need it to search the title of the books that I have stored in my database which can be accessed in the GET requests location. So far, I have managed the code to get the array from the database, but I am trying to search by title.</p>
  
  <pre><code>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();
  </code></pre>
  
  <p>Here is my <strong>HTML</strong> code where I am working with the search bar and attempting to display it.</p>
  
  <pre><code>&lt;section class="bookSearchBar"&gt;
      &lt;h4&gt;Search Books&lt;/h4&gt;
      &lt;form method="GET" id="searchBooks" class="form-inline md-form form-sm active-pink-2 mt-2"&gt;
          &lt;input id="searchBar" class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search by Title" aria-label="Search"&gt;
          &lt;button id="searchBtn" type="button"&gt;Submit&lt;/button&gt;
          &lt;i class="fas fa-search" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;/form&gt; 
      &lt;div id="booksFound"&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Please inform me if you need more information.</p>
  
  <p>UPDATE: Re-posted for hopefully a less confusing title.</p>