如何使用jquery带来ajax搜索onkeyup

我的脚本叫ajax

 function search_func(value) { $.ajax({ type: "GET", url: "sample.php", data: {'search_keyword' : value}, dataType: "text", success: function(msg){ //Receiving the result of search here } }); }  

HTML

问题： onkeyup我使用ajax来获取结果。 一旦ajax结果延迟增加，我就会出现问题。

例如在键入t关键字时，我收到ajax结果，在键入te时，当两个键盘之间的ajax时间延迟有时会产生严重问题时，我会收到ajax结果。

当我快速打字时。 ajax搜索t关键字来得晚，与te 。 我不知道如何处理这类案件。

结果由于ajax延迟而快速键入te关键字。 t关键字的结果来了。

我相信我已经解释了读者的知识。

Answer 1

您应该检查值是否随时间变化：

 var searchRequest = null; $(function () { var minlength = 3; $("#sample_search").keyup(function () { var that = this, value = $(this).val(); if (value.length >= minlength ) { if (searchRequest != null) searchRequest.abort(); searchRequest = $.ajax({ type: "GET", url: "sample.php", data: { 'search_keyword' : value }, dataType: "text", success: function(msg){ //we need to check if the value is the same if (value==$(that).val()) { //Receiving the result of search here } } }); } }); }); 

编辑：

添加了searchRequest变量以防止对服务器发出多个不必要的请求。

Answer 2

保持$.ajax()返回的XMLHttpRequest对象，然后在下一个keyup上调用.abort（）。 这应该会杀死之前的ajax请求并允许你执行新的请求。

 var req = null; function search_func(value) { if (req != null) req.abort(); req = $.ajax({ type: "GET", url: "sample.php", data: {'search_keyword' : value}, dataType: "text", success: function(msg){ //Receiving the result of search here } }); } 

Answer 3

尝试使用jQuery UI自动完成 。 为您节省许多低级编码。

Answer 4

首先我会建议在每个keyup上调用ajax是不好的（这就是为什么你在这个问题上运行）。

第二，如果你想使用keyup然后在输入框后显示一个加载图像，以向用户显示其仍然加载（使用加载图像，就像你开始添加评论）

Answer 5

几个指针。 首先，语言是javascript的弃用属性。 在HTML（5）中，您可以关闭该属性，或使用type =“text / javascript”。 其次，你正在使用jQuery，那么为什么你还可以使用jQuery进行内联函数调用呢？

 $（函数（）{

    //文件准备就绪

    $（ “＃sample_search”）。KEYUP（函数（）
    {

        $就（{
          类型：“GET”，
           url：“sample.php”，
           data：{'search_keyword'：value}，
           dataType：“text”，
          成功：function（msg）
           {
                //在此处接收搜索结果
           }
        }）;

    }）;

 }）;

我建议在keyup事件和调用ajax函数之间留一点延迟。 您可以做的是使用setTimeout检查用户是否已完成输入，然后再调用您的ajax函数。