从json获取结果

Question

I have a bootstrap live search for pixabay api. But I have a problem with results from pixabay. For example, I want to search images with query flowers but its returning results when i start typing. I type flo and i have a images with tag flo. At the end I have links to images with tag flow flowe and flowers. How to prevent this situation?

$('#search').keyup(function(){  
    var q = $(this).val().toLowerCase();
    var API_KEY = 'xx';
    var URL = "https://pixabay.com/api/?key="+API_KEY+"&q="+encodeURIComponent(q);
    $.getJSON(URL, function(data){
    if (parseInt(data.totalHits) > 0)
        $.each(data.hits, function(i, hit){ 
        htmlData = '<div class="col"><img src="'+hit.largeImageURL+'" class="img-fluid" alt=""/></div>';
         $('.modal-body').append(htmlData);
    });
    else
        console.log('No hits');
    });
});

How to load expected images dynamically into modal? Also how to remove images when i remove few chars from search bar? If i put flowers It load flowers into modal, but when i type cars I want to show only cars, not flowers and cars.

Answer 1

There's two things you need to do to fix this behaviour. The first is to 'debounce' the event so that the AJAX request is only made when typing has finished for a short delay, eg. 150ms. The second is to wipe all previous results from the UI before you add the latest ones. Try this:

var searchTimeout;

$('#search').keyup(function() {
  var q = $(this).val().toLowerCase();
  var API_KEY = 'xx';
  var URL = "https://pixabay.com/api/?key=" + API_KEY + "&q=" + encodeURIComponent(q);
  clearTimeout(searchTimeout);

  searchTimeout = setTimeout(function() {
    $.getJSON(URL, function(data) {
      if (parseInt(data.totalHits) > 0) {
        var htmlData = data.hits.map(function(hit) {
          return `<div class="col"><img src="${hit.largeImageURL}" class="img-fluid" alt=""/></div>`;
        });
        $('.modal-body').html(htmlData); // note 'html()' here. It will overwrite all existing content
      } else {
        console.log('No hits');
      }
    });
  }, 150);
});