I have the some HTML and JavaScript code that implements
a type-ahead capability for a text input control linked to a
select control (see end of message). The type-ahead
functionality works well. The only problem is that I'd like
to implement an external event sink so that when the text
control loses focus, I can do ... well whatever I might
happen to want the event sink to do.
The code below will even sink the onblur event of the text
control and will behave properly. (To see it in action,
change function for this.onNotInLis t to alert the user
when the text control loses focus.)
The problem is, I'd like to be able to set the notinlist sink
to a function outside the class. I'm not able to get the
syntax right for it. I've tried, for example,
var ta = new TypeAhead();
ta.onNotInList = pointerToMyNotI nListHandler;
but I can't seem to get it to work.
What am I missing? What do I need to do?
javacript dude
<html>
<head>
<script language="javas cript">
function TypeAhead(txtPa rent, selChild){
this.txtParent = txtParent;
this.selChild = selChild;
this.onNotInLis t = function(){void (0);}
//this.onNotInLis t = function(){aler t("not in list");}
var notInList = this.onNotInLis t;
this.txtParent. onkeyup = function(){
var optionText = txtParent.value .toUpperCase();
var options = selChild.option s;
for (var i = 0; i < options.length; i++){
if(optionText.l ength > 0 && options[i].text.toUpperCa se().indexOf(op tionText)==0){
options[i].selected=true;
return;
}
}
selChild.select edIndex = -1;
}
this.txtParent. onblur = function(){
if (selChild.selec tedIndex == -1) {
notInList();
}
}
this.selChild.o nclick = function(){
var selectedIndex = selChild.select edIndex;
if (selectedIndex > -1){
txtParent.value = selChild.option s[selectedIndex].text;
}
}
}
TypeAhead.proto type.contructor = TypeAhead;
var ta;
function NotInList(){
alert("not in list");
}
window.onload = function initDocument(){
ta = new TypeAhead(txtIn put, selStates);
}
</script>
</head>
<body>
<input id="txtInput" type="text"/>
<br />
<br />
<select id="selStates" size="5">
<option>Alabama </option>
<option>Arkansa s</option>
<option>Connect icut</option>
<option>Delawar e</option>
<option>Florida </option>
<option>Georgia </option>
<option>Hawai i</option>
<option>Indiana </option>
<option>Kentuck y</option>
</select>
</body>
</html>
