问:我试图让实时搜索功能正常工作,但它表现得很奇怪..我删除了所有按钮和表单,只留下搜索栏并使用 .keypress() 来触发它:
$('#search').keypress(function (evt) {
// AJAX 部分
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var animal = $(this).val();;
var flickrOptions = {
标签:动物,
格式:"json"
};
function displayPhotos(data) {
var photoHTML = ' < ul > ';
$.each(data.items,function( i,photo) {
photoHTML += ' < li class = "grid-25 tablet-grid-50" > ';
photoHTML += ' <a href = "' + photo.link + '" 类= "图像" > ';
photoHTML += ' < img src = "' + photo.media.m + '" ></ a ></ li > ';
}); // 结束每张
照片HTML += ' </ ul > ';
$('#photos').html(photoHTML);
}
$ .getJSON(flickerAPI,flickrOptions,displayPhotos);
});
但是,例如,当我输入“cat”时,我会得到我认为是“catch”的结果。我知道我们被告知您无法控制 AJAX 请求返回的顺序。但一定有办法吧?我在其他网站上看到过这种实时搜索功能...
答:功能还行。但是有一个弱点。事件“keypress”比更改输入字段的值更早触发的事实。因此,第一个时间函数发送空请求,然后是字母“c”,然后是“ca”。添加console.log($(this).val()); 在功能开始。
我的解决方案是更改“keyup”中的事件处理程序
或者通过 setTimeout() 利用延迟并等待输入结束。