need Javascript OO help

G

Guest

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.text.toUpperCase().indexOf(optionText)==0){
options.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>
 
F

Fred Oz

but I can't seem to get it to work.
Click to expand...

But you're disgustingly close...
What am I missing? What do I need to do? [...]
this.onNotInList = function(){void(0);}
//this.onNotInList = function(){alert("not in list");}
Click to expand...
this.onNotInList = NotInList;
...

And that's it.


[...]
window.onload = function initDocument(){
ta = new TypeAhead(txtInput, selStates);
}
Click to expand...

Using global references to element id's only works in Firefox in
quirks mode (or IE always), use something like:

window.onload = function initDocument(){
ta = new TypeAhead(document.getElementById('txtInput'),
document.getElementById('selStates'));

Or better still, put your controls iside a form and use the
forms collection:

window.onload = function initDocument(){
ta = new TypeAhead(document.aForm.txtInput,
document.aForm.selStates));
....

<form action="" name="aForm">
<input name="txtInput" type="text"/>
<select name="selStates" size="5">
...


Or pass the IDs as strings and use gEBI from inside the
function and provide a document.all alternative for older IE.
 
R

RobB

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.text.toUpperCase().indexOf(optionText)==0){
options.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>
Click to expand...


Had to google 'event sink' so you know you're dealing with a pro. #:eek:
Thought some closures might help (tested: NS7.2, ie6win, Opera 7).

<html>
<head>
<script type="text/javascript">

function TypeAhead(tfieldid, sfieldid)
{
var o = this;
this.tfield = document.getElementById(tfieldid);
this.sfield = document.getElementById(sfieldid);
this.onNotInList = function()
{
alert('not in list !');
this.sfield.selectedIndex = -1;
this.tfield.value = '';
this.tfield.focus();
}
this.tfield.onkeyup = function()
{
o.tfield.value =
o.tfield.value.replace(/^\s+/,'').replace(/\s+$/,'');
if (/^\s*$/.test(o.tfield.value))
{
o.sfield.selectedIndex = -1;
return;
}
var re = new RegExp('^' + o.tfield.value, 'i');
var options = o.sfield.options;
for (var i = 0; i < options.length;i++)
{
if (re.test(options.text))
{
options.selected = true;
return;
}
}
o.onNotInList();
}
this.sfield.onclick = function()
{
var sI = o.sfield.selectedIndex;
if (sI > -1)
o.tfield.value = o.sfield.options[sI].text;
}
}

TypeAhead.prototype.contructor = TypeAhead;
var ta;

window.onload = function()
{
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>California</option>
<option>Connecticut</option>
<option>Delaware</option>
<option>Florida</option>
<option>Georgia</option>
<option>Hawaii</option>
<option>Indiana</option>
<option>Kansas</option>
<option>Kentucky</option>
</select>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascrip code wont run properly. 2
Add Image and label dynamically inside the dropdown 2
Very Basic CC Validation Javascript 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Need help , Having problem with Drag n Drop ? 9
I dont get this. Please help me!! 2
Need help with stripe payment 0

Members online

Total: 37 (members: 2, guests: 35)
Robots: 422

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,045
Latest member
DRCM

Latest Threads

Top