时间戳

首页 > 解决方案 > 从 json 中获取结果

javascript - 从 json 中获取结果

问题描述

我有一个 pixabay api 的引导实时搜索。但是我对 pixabay 的结果有疑问。例如，我想搜索带有查询花的图像，但在我开始输入时它会返回结果。我输入 flo，我有一个带有标签 flo 的图像。最后，我有带有标签 flowe 和 flowers 的图像链接。如何预防这种情况？

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

如何将预期图像动态加载到模态中？当我从搜索栏中删除几个字符时，如何删除图像？如果我把鲜花加载到模态中，但是当我输入汽车时，我只想显示汽车，而不是鲜花和汽车。

标签： javascriptjquery

解决方案

要解决此问题，您需要做两件事。第一个是“去抖动”事件，以便 AJAX 请求仅在键入完成并短暂延迟时发出，例如。150 毫秒。第二个是在添加最新结果之前从 UI 中清除所有以前的结果。试试这个：

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

推荐阅读