TEL:400-8793-956
当前位置:程序、服务器

实时搜索功能正在运行

提问者: 近期获赞: 浏览人数: 发布时间:2021-08-30 08:57:57

 问:我试图让实时搜索功能正常工作,但它表现得很奇怪..我删除了所有按钮和表单,只留下搜索栏并使用 .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() 利用延迟并等待输入结束。
上一篇: 'bigger' && 'smaller' 这两个参数不应该是相对的
下一篇: 去掉 php 站点中的 .php 扩展名,但仍然能够将表单发送到 php 进程文件