jquery UI自动完成显示早期文本的响应

我正在使用Jquery自动完成。如果用户键入2个字符，然后等待，然后键入另一个。如果第一个响应在第二个响应之后出现，它将简要显示第二个清单，然后显示第一个清单。如何在用户开始输入更多内容后取消第一个请求？jquery UI自动完成显示早期文本的响应

$("#city").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: "/geo/json_autocomplete.php", 
       dataType: "json", 
       data: { 
        term: $("#city").val(), 
        countryid: $("#countryid").val() 
       }, 
       success: function(data) { 
        response($.map(data, function(item) { 
         //console.debug(item.value+" "+item.label+" "+item.id); 
         return { 
          label: item.label, 
          value: item.value, 
          id: item.id 
         } 
        })); 
       } 
      }); 
     }, 
     minLength: 2, 
     delay: 500, 
     select: function(event, ui) { 
      $("#cityid").val(ui.item.id); 
      showForm(); 
     } 
    });

来源

2012-01-27 Tom Kincaid

尝试添加'async：false'作为ajax请求的选项。当我需要维护ajax请求的顺序时，我发现它很有帮助。它也可能适用于此。 – Lester 2012-01-27 22:37:51

@Lester：这不是一个好建议。指定'async：false'会在请求期间锁定浏览器。 – 2012-01-27 22:45:45

你可以尝试存储XHR在一个变量，它与xhr参数您在AJAX成功回调得到比较。只有在两者匹配时才调用响应函数。您也可以相应地调整“延迟”参数。

var lastXhr; 

$("#city").autocomplete({ 
    delay: 500, // 500ms between requests. 
    source: function(request, response) { 
     lastXhr = $.ajax({ 
      url: "/geo/json_autocomplete.php", 
      dataType: "json", 
      data: { 
       term: $("#city").val(), 
       countryid: $("#countryid").val() 
      }, 
      success: function(data, status, xhr) { 
       if (xhr === lastXhr) { 
        response($.map(data, function(item) { 
        //console.debug(item.value+" "+item.label+" "+item.id); 
         return { 
          label: item.label, 
          value: item.value, 
          id: item.id 
         }; 
        })); 
       } 
      } 
     }); 
    }, 
    minLength: 2, 
    delay: 500, 
    select: function(event, ui) { 
     $("#cityid").val(ui.item.id); 
     showForm(); 
    } 
});

来源

2012-01-27 22:41:27

这很好。谢谢！ – 2012-02-07 15:04:59

jquery UI自动完成显示早期文本的响应

回答

相关问题