Article:		Cooking with JavaScript & DHTML
Subject:		A little problem with this script
Date:		2006-01-19 11:16:01
From:		josefina
Its a really nice script, but it daes not detect the onChange method when you write the option. Im using IE 6. How can I fix this? Any idea? mm.. Thanks !

Showing messages 1 through 3 of 3.

• Simulating onchange events
  2006-02-17 15:39:17  dannyg1 [Reply | View]
  
  
  (I thought I had replied to this earlier, but I guess it didn't stick. Here's hoping the formatting doesn't get messed up.)
  
  The basic idea is that you need a scripted trigger to simulate the user making a selection with a mouse. One way to approach it is to add to the typeAheadInfo object (it's already a global, so no need to add more global vars to the mix), and let it preserve a reference to the currently active select element and invoke the event handler function. The typeAheadInfo.reset() function execution is an appropriate time for the simulated onchange action to take place, as its execution signifies that the script is no longer waiting for a continuation of type-ahead entry.
  
  The exact way you'd construct this depends on how you implement the real onchange event handlers in your page. For simplicity of demonstration, I'll assume that the select elements have the following event handler inside their tags:
  
  onchange="showChange(this)"
  
  Here's a dummy handler function you can use to test things out:
  
  

  function showChange(elem) {
  
      alert("/'onchange/' execution for " + elem.id + " with value: " + elem.value + ".");
  
  }
  
  

  
  
  And here's the modified typeAheadInfo object definition with changes in bold:
  
  

  
  
  var typeAheadInfo = {last:0, 
  
                       accumString:"", 
  
                       delay:500,
  
                       timeout:null,
  
                       selectElem:null,
  
                       changeEvent:function() {if (this.selectElem) {showChange(this.selectElem)}},
  
                       reset:function() {this.last=0; this.accumString=""; this.changeEvent(); this.selectElem=null}
  
                      };
  
  

  
  
  Then, inside the typeAhead() function, add the following statement after the script obtains a reference to the select element:
  
  typeAheadInfo.selectElem = selectElem;
  
  (Incidentally, I also noticed that the processing occurs even when the user types the Tab key to move away from the current select element. To prevent this, add the following statement to the typeAhead() function after the charCode variable is set:
  
  if (charCode == 9) {return}
  
  Not including this statement causes an extra execution of the simulated onchange event, which could slow things down if you're doing some heavy-duty processing for that event.)
  
  One more thing about this entire subject: For accessibility reasons, you probably don't want to rely exclusively on the onchange event (or simulation described here) to process a select element choice. Although not as convenient for users with mice, an extra "Go" button next to the select element may be preferred. This button can also be accessed via keyboard, and eliminates the need for the onchange simulation.

• A little problem with this script
  2006-02-17 10:43:40  mbramer [Reply | View]
  
  
  Actually, I figured something out on my own shortly after asking if you did. :-)
  
  1. Outside of your typeAhead() function, make a "global" variable that will store a boolean to flag if typeAhead has been used and default it to false:
  
  var typeAheadUsed = false;
  
  
  2. Inside your typeAhead() function, look for:
  
  typeAheadInfo.currentString += newChar;
  
  and add this line after it:
  
  typeAheadUsed = true;
  
  
  3. Make another function at the same scope as typeAhead as such:
  
  function changeMe() {
  var selectElement = window.event.srcElement;
  if (typeAheadUsed) selectElement.fireEvent("onChange");
  }
  
  4. For every Select control for which you've assigned onKeyDown to typeAhead(), assign onClick to changeMe()
  
  I have not rigorously tested, but it seems to work fine.

• A little problem with this script
  2006-02-17 08:34:52  mbramer [Reply | View]
  
  
  I'm having the same issue and haven't seen any responses in this forum. Did you figure this out on your own or get any direct responses that you could share? Thanks...