How do I trigger a suggest list when keyboard is idle

LyndonOHRC · Mar 9, 2011

I have a suggest list that is populated when a certain number of characters have been typed. This is the only triggering mechanism I've been able to find.

My customer has asked if instead the AJAX call can be made after they stop typing for two or three seconds. Is this possible? This would result in fewer calls to the server side code.

Code:

function FoalNameSuggestList(inputElem,TableData) {
 var urlVar=document.getElementById(inputElem).value;
 if (urlVar.length>3 [COLOR=red]/*And keyboard is idle for two seconds ???*/[/color]){
  var xmlhttp;
  if (window.XMLHttpRequest) {
   xmlhttp=new XMLHttpRequest();
  }
  else if (window.ActiveXObject){
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  else{alert("Your browser does not support XMLHTTP!");}
   xmlhttp.onreadystatechange=function(){
   if(xmlhttp.readyState==4){
    var users = eval(trim(xmlhttp.responseText));
    var str = '<ul class="suggestList">';
    for ( var recno in users ) {
     str += '<li onmouseover="HighlightSuggestList(this.id)" onmouseout="noHighlightSuggestList(this.id)" class="listItem" id="'+users[recno].OBN+'" onclick="putFoalData( \'' +users[recno].OBN+ '\',\'' +TableData+ '\')">'+users[recno].HoresName+'</li>';
    }
    str +='</ul>';
    document.getElementById(TableData).innerHTML = str;
    document.getElementById(TableData).style.display='block';
    document.getElementById(TableData).onblur=function() {setOnblur(TableData)};
    document.getElementById(TableData).onmouseover=function() {setFocus(TableData)};
   }
   else{
    document.getElementById(TableData).innerHTML = '';
    document.getElementById(TableData).style.display='none';
   }
  }
  var randomString = new Date().getTime();
  xmlhttp.open("GET","NoMenu/GetChart.cfm?NoCache="+randomString+"&searchTerm="+urlVar+"&Horse="+TableData,true);
  xmlhttp.send(null);
 }
}

Thanks in advance for any suggestions!

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

LyndonOHRC · Mar 17, 2011

Any comment would be appreciated...

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

JustinEzequiel · Mar 17, 2011

this should get you started
(use at own risk)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
    var timeout = null;
    function XMLHTTP() {
        if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();}
        else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
        return xmlhttp;
        }
    function do_post(path, params) {
        var x = XMLHTTP();
        x.open('POST', path, false);
        x.setRequestHeader('Content-type', 'application/x-[URL unfurl="true"]www-form-urlencoded');[/URL]
        x.setRequestHeader('Content-length', params.length);
        x.setRequestHeader('Connection', 'close');
        x.send(params);
        return x.responseText;
        }
    function onkeyup_callback(prefix) {
        if (timeout) {
            clearTimeout(timeout);
            }
        if (prefix.length>3) {
            timeout = setTimeout(function(){populate_suggestions(prefix);}, 2000);
            }
        }  
    function populate_suggestions(prefix) {
        /* replace this with your own code */
        var e = document.getElementById('suggest');
        e.innerHTML = do_post('/htbin/randomstrings.py', 'prefix='+escape(prefix));
        }
  </script>
  </head>
  <body>
  <input type="text" id="dataentry" onkeyup="onkeyup_callback(this.value);">
  <br>
<textarea id="suggest" rows="10">
</textarea>
  </body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do I trigger a suggest list when keyboard is idle

LyndonOHRC

Programmer

LyndonOHRC

Programmer

JustinEzequiel

Programmer

Similar threads

Part and Inventory Search

Sponsor