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.onNotInList 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 = pointerToMyNotInListHandler;
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="javascript">
function TypeAhead(txtParent, selChild){
this.txtParent = txtParent;
this.selChild = selChild;
this.onNotInList = function(){void(0);}
//this.onNotInList = function(){alert("not in list");}
var notInList = this.onNotInList;
this.txtParent.onkeyup = function(){
var optionText = txtParent.value.toUpperCase();
var options = selChild.options;
for (var i = 0; i < options.length;i++){
if(optionText.length > 0 && options[i].text.toUpperCase().indexOf(optionText)==0){
options[i].selected=true;
return;
}
}
selChild.selectedIndex = -1;
}
this.txtParent.onblur = function(){
if (selChild.selectedIndex == -1) {
notInList();
}
}
this.selChild.onclick = function(){
var selectedIndex = selChild.selectedIndex;
if (selectedIndex > -1){
txtParent.value = selChild.options[selectedIndex].text;
}
}
}
TypeAhead.prototype.contructor = TypeAhead;
var ta;
function NotInList(){
alert("not in list");
}
window.onload = function initDocument(){
ta = new TypeAhead(txtInput, selStates);
}
</script>
</head>
<body>
<input id="txtInput" type="text"/>
<br />
<br />
<select id="selStates" size="5">
<option>Alabama</option>
<option>Arkansas</option>
<option>Connecticut</option>
<option>Delaware</option>
<option>Florida</option>
<option>Georgia</option>
<option>Hawaii</option>
<option>Indiana</option>
<option>Kentucky</option>
</select>
</body>
</html>