CODEWITHSUNDEEP
javascriptajax
vygrdev
vygrdev

Reputation: 203

Dynamically remove search results

I am building a search feature in a web app. I have got it sort of working but can't figure out how to remove items as the user backspaces, the letters in the search bar no longer match the items that have appeared or if the search term is emptied completely.

All the results just stay there.

Here is the AJAX call


$("#search-box").keyup(function() {
  search()
});

const search = function() {
  let searchTerm = document.getElementById("search-box").value;
    $.ajax({
      type: 'GET',
      url: '/electra/search/',
      data: {
        'search_term': searchTerm
      },
      success: function(data) {
        data.forEach(([cafeName]) => {
          var cafeName = cafeName;
          var searchList = $(
            `<div>
                    <ul class="list-item border-top" data-idtext="${cafeName}" id="${cafeName}">${cafeName}</ul>
                </div>`
          );
          searchList.appendTo('#search-results');
        });
  
        $("ul").click(function(event) {
          var selectedVenue = event.target.id;
          $("#search-results").empty()
          console.log("Clicked" + " " + selectedVenue);
          getVenueDetails(selectedVenue)
        });
      }
    });
};

Upvotes: 1

Views: 81

Answers (1)

Cjmarkham
Cjmarkham

Reputation: 9681

When text is entered and you call search you are appending the results to the existing list

searchList.appendTo('#search-results')

You will need to empty the results when new text is added. You can simply call

$("#search-results").empty()

at the start of the search function.

A couple of notes:

  • var cafeName = cafeName; is pointless and can be removed.
  • In your keyup handler, you can check the length of the text. If it's blank, just remove the search results and don't bother calling search
$("#search-box").keyup(function() {
  const searchTerm = document.getElementById("search-box").value;

  if (searchTerm.length === 0) {
    $("#search-results").empty()
    return // don't need to do anything else
  }

  search()
})
  • For performance, it's best to set a minimum length before you start searching. If the search box only contains the letter a, that's going to be a lot of pointless matches. Consider a minimum of 3 to return better matches.
$("#search-box").keyup(function() {
  const searchTerm = document.getElementById("search-box").value;
  
  // Don't want to search if only a few characters
  if (searchTerm.length < 3) {
    if (searchTerm.length === 0) {
      // Deleted search term so remove everything
      $("#search-results").empty()
    }
    return // don't need to do anything else
  }

  search()
})
  • As mentioned in the comments, ul should contain an li. If you don't want this and each ul is clickable, make it an anchor element.
var searchList = $(
  `<div>
    <a href="#" class="list-item border-top" data-idtext="${cafeName}" id="${cafeName}">${cafeName}</a>
  </div>`
);

Upvotes: 1

Related Questions