Hello. I want to make the browser show some suggestions under a text
box (like the To: field in webmail interfaces that displays addresses
in the addressbook). Basically whenever something changes in the text
box (i.e. an onKeyUp even occurs) I check to see what words in the
"address book" match the word in the box. After that I fill a <div>
with links that onClick update the text box contents. Here's how it's
written:
in search.html:
[stuff removed]
<script type="text/javascript">
// potential choices go here(nevermind the language :)
var vect = new Array();
vect[0] = "asa";
vect[1] = "acasa";
vect[2] = "ana are mere";
vect[3] = "android";
vect[4] = "analgezic";
vect[5] = "asin";
vect[6] = "as";
vect[7] = "accelerator";
vect[8] = "amanet";
vect[9] = "alegro";
vect[10] = "altu";
vect[11] = "altceva";
</script>
<script type="text/javascript" src="search.js"></script>
[more stuff removed]
<form name="f1" id="f1">
<input class="box" type="text" id="nume" style="width : 200px;"
onkeyup="makeSuggestions()">
<input class="box" type="submit" name="submit" id="submit"
value="Submit">
</form>
</p>
<div id="choices">
<b>Suggestions</b>
</div>
[the rest is irrelevant]
and in search.js:
// this function adds the links. i tell it where to add them, what text
they should have and what onClick action
function adda(obj,txt,action)
{
if(typeof obj == "string")
obj = document.getElementById(obj);
newlnk = document.createElement('a');
newtext = document.createTextNode(txt);
newlnk.setAttribute('href','#');
newlnk.setAttribute('onClick',action);
newlnk.appendChild(newtext);
obj.appendChild(newlnk);
}
// just adds a <br>
function addbr(obj)
{
if(typeof obj == "string")
obj = document.getElementById(obj);
br = document.createElement('br');
obj.appendChild(br);
}
// deletes all child nodes of obj, except for the first [keepnodes]
function clearContainer(obj,keepnodes)
{
if(typeof obj == "string")
obj = document.getElementById(obj);
while (obj.childNodes.length != keepnodes) {
obj.removeChild(obj.lastChild);
}
}
// this updates the text box. alert() there for debugging purposes
function updateBox(value)
{
alert('in updateBox()');
document.getElementById('nume').value = value;
setVisible('choices', false);
}
// function that actually does the search and updates the suggestions
<div>
function makeSuggestions()
{
if (document.getElementById('nume').value.length == 0) {
setVisible('choices',false);
}
else {
var matches = 0;
clearContainer('choices',2);
addbr('choices');
for (i = 0; i < vect.length; i++) {
if (vect[i].indexOf(document.getElementById('nume').value) == 0) {
addbr('choices');
adda('choices',vect[i],"updateBox('" + vect[i] + "')");
matches++;
}
}
if (matches == 0) {
setVisible('choices',false);
}
else {
setVisible('choices',true);
}
}
}
choices starts as a hidden layer. When the user changes something the
script checks to see wether there are matches in vect[] for the text in
'nume'. If there aren't any the choices <div> is hidden. If there are
available choices they are displayed in the choices <div>. When the
user clicks one of the choices' links the value in 'nume' is updated
and the choices <div> is hidden.
This all works fine in Firefox and Opera. IE however doesn't update the
text box when the links are clicked. I inserted an alert() in the code
in the updateBox() function, to see if it gets called, and it doesn't.
So I believe IE doesn't properly assign the onClick attribute to the
link. Unfortunately there is no DOM inspector (like in FF), so all I
can do is guess what's wrong. IE won't display any errors.
Any ideas? What's wrong with the code? setAttribute() is a standard
method (W3 says) so it should work. It sets the 'href' part right, so I
can't see why 'onClick' won't work.
