advertisement

Article:
  Cooking with JavaScript & DHTML
Subject:   a better mousetrap
Date:   2006-06-28 07:17:41
From:   jason2584
I've messed with Danny's script pretty extensively, and I ended up solving several of the problems mentioned here before I ran into the issue of the change event not firing for the select element. I'm still looking for the fix to that one, but I thought I'd post my code that doesn't have the num-pad problem or the problem where typing beyond a find starts the search over instead of staying on the first match. It's also shorter than the original, but I removed the comments, so you'll have to do your own dirty work to make changes to it. I hope it helps someone.




var taInfo = {

  last:0,

  charsTyped:'',

  delay:1000,

  timeout:null,

  reset:function() { this.last=0; this.charsTyped=''; }

};


function typeAhead() { 

  if(window.event && !window.event.ctrlKey && window.event.keyCode > 19) {

    var now = new Date();

    if(taInfo.charsTyped == '' || now - taInfo.last < taInfo.delay) {

      var ddl = window.event.srcElement;

      clearTimeout(taInfo.timeout);

      taInfo.last = now;

      taInfo.timeout = setTimeout('taInfo.reset()', taInfo.delay);

      taInfo.charsTyped += String.fromCharCode(window.event.keyCode).toLowerCase();

      for(var i=0; i < ddl.options.length-1; i++)

        if(ddl.options[i].text.toLowerCase().indexOf(taInfo.charsTyped) == 0)

          { ddl.selectedIndex = i; break; }

    }

    window.event.returnValue = false;

    return true;

  }

  return true;

}
Full Threads Oldest First

Showing messages 1 through 1 of 1.

  • oops
    2006-06-28 07:26:06  jason2584 [Reply | View]

    The terminating expression on the for loop in the code I posted was incorrect. It should run for i < ddl.options.length, not i < ddl.options.length-1. My bad.
-->