Javascript 没有重叠结果的自动完成

Question

我有需要改进的自动完成文本框。如果你打字慢，它工作正常，但如果你打字快，那么我会得到乘法结果重叠。例如，如果我将 1 个字母全部擦除到最后，我会得到结果，因为文本框中的字母很少。后来的结果看起来是正确的，但看起来像是慢动作。

我试过在新请求到来时对 HTTP 请求使用 abort() 方法，但这并没有解决问题。

方法在文本框的按键上触发。

问题是如何停止上一个请求并只处理当前请求。

function getResults(inputValue){
 var url="Ajax/acResults.aspx";
 url=url+"?input="+inputValue;
        url=url+"&idrnd="+Math.random();

 var xmlHttpPC=GetXmlHttpObject();
 xmlHttpPC.onreadystatechange=function(){
     if (xmlHttpPC.readyState==4){ 
            document.getElementById("resultBox").innerHTML=xmlHttpPC.responseText;
        }
 };
 xmlHttpPC.open("GET",url,true);
 xmlHttpPC.send(null);
}

function GetXmlHttpObject(){
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}

经过一些测试，我最终结合了中止方法和检查 XMLHttpRequest 对象的值：

var xmlHttpPC=null;
function getResults(inputValue){
 var url="Ajax/acResults.aspx";
 url=url+"?input="+inputValue;
    url+="&idrnd="+Math.random();

 if (xmlHttpPC!=null) {
        xmlHttpPC.abort();
        xmlHttpPC = null;
    } 
    if (xmlHttpPC==null) {
        xmlHttpPC=GetXmlHttpObject();
    }
  
 xmlHttpPC.onreadystatechange=function(){
     if (xmlHttpPC.readyState==4){ 
            document.getElementById("resultBox").innerHTML=xmlHttpPC.responseText;
            xmlHttpPC=null;
        }
 };
 xmlHttpPC.open("GET",url,true);
 xmlHttpPC.send(null);
}

Answer 1

只有在 150 毫秒内没有删除或添加字母（根据需要更改值）时，才使用 debounce 发送 ajax 调用：

    function debounce(fn, delay) {
      var timer = null;
      return function () {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
          fn.apply(context, args);
        }, delay);
      };
    }

    var getResultsDebounced = debounce(getResults, 150); // now you have a new function called getResultsDebounced which being triggered after idle of 150ms

whatever.addEventListener("keyup",getResultsDebounced, false);

Answer 2

您可以通过检查标志变量来实现它，或者您可以将 xmlhttp 变量与 null 进行比较，如下所示 -

var xmlHttp=null;
    function getResults(inputValue){
       if(xmlHttp!=null)
           return;
        //--------
            //-------
            if (xmlHttpPC.readyState==4)
                { 
                document.getElementById("resultBox").innerHTML=xmlHttpPC.responseText;
                xmlHttp=null;
                }
        };
        //--------
    }

    function GetXmlHttpObject(){
      xmlHttp=null;
      //------
    }

Javascript 没有重叠结果的自动完成

Javascript autocomplete without overlapping results

javascript

ajax

xmlhttprequest