title: Aborting previous XMLHttpRequest
body: <p>I have a search box and I want to display search results while typing instantly; but on fast typing I have problems.</p>
  
  <p>JavaScript:</p>
  
  <pre><code>function CreateXmlHttp() {
      var xmlhttp;
      try {
          xmlhttp = new XMLHttpRequest();
      } catch (e) {
          try {
              xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
          }catch (e) {
              try {
                  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
              } catch (e) {
                  alert("your browser doesn't support ajax");
                  return false;
              }
          }
      }
      return xmlhttp;
  }
  function searchfunc(value) {
      if (value!='') {
          var xmlhttp = CreateXmlHttp();
          xmlhttp.open('GET','http://example.com/ajax/instant_search.php?q='+value,true);
          xmlhttp.send(null);
          xmlhttp.onreadystatechange=function() {
              if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) {
                  document.getElementById('search_result').innerHTML = xmlhttp.responseText+'&lt;li&gt;&lt;a href="http://example.com/search.php?q='+value+'"&gt;full search for &lt;strong&gt;'+value+'&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;';
              }
          }
      } else document.getElementById('search_result').innerHTML = '';
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input id="search_box" type="text" placeholder="type to search..." onkeyup="searchfunc(this.value)"&gt;
  &lt;ul id="search_result"&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>how can I abort previous XMLHttpRequest on new key presses?</p>