[英]Fetch results from json
我有一个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');
});
});
如何将期望的图像动态加载为模态? 另外,当我从搜索栏中删除一些字符时,如何删除图像? 如果我放花,它将花加载到模式中,但是当我键入汽车时,我只想显示汽车,而不是花和汽车。
要解决此问题,您需要做两件事。 第一种是“消除”该事件,以便仅在短暂延迟下完成键入后才发出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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.