Question

我有一个Bootstrap实时搜索的api。但是我对结果的查询有疑问。例如，我想搜索带有查询花的图像，但是当我开始键入时返回的结果。我输入flo，并且我有一个带有flo的图像。最后，我链接到带有标签流和花朵的图像。如何预防这种情况？

$('#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');
    });
});

如何将期望的图像动态加载到模式中？另外，当我从搜索栏中删除一些字符时，如何删除图像？如果我放鲜花，它将鲜花加载到模式中，但是当我键入汽车时，我只想显示汽车，而不是花朵和汽车。

Answer 1

您需要做两件事来解决此问题。第一种是“消除”该事件，以便仅在短暂延迟下完成键入后才发出AJAX请求。 150毫秒。第二种是在添加最新结果之前，先清除用户界面中所有以前的结果。试试这个：

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

从json获取结果

1 个答案: