Adding an item to an editable menulist when it is typed in by the user

Question

I am creating a menulist popup list dynamically. I the editable and open attributes to true. What I would like to be able to do is to be able to add a new menulist item when the user types in an item that is not already present. Is this possible? If so, how?

I am creating the list like so:

var ml = document.createElement("menulist");
ml.setAttribute("editable","true");
ml.setAttribute("open","true");
ml.setAttribute("oncommand","alert(this.value)");
var mp = document.createElement("menupopup");
var mi = document.createElement("menuitem");
mi.setAttribute("label","item1");
mi.setAttribute("value","1");
mp.appendChild(mi);
//add as many items as i feel
ml.appendChild(mp);

When the value is changed, the alert function is fired when the item is changed but when I type in anything, it is not fired. Basically, I want to eventually pass the value to a funcntion I call from here to add the item to the list.

Answer 1

First of all, you should seriously consider using addEventListener instead of changing attributes like oncommand:

ml.addEventListener("command", function(event) {
 alert(this.value);
}, false);

If you want to be notified about changes in the text field then you should add an event listener to the text field:

ml.appendChild(mp);
ml.inputField.addEventListener("input", function(event)
{
  alert("Text field value changed");
}, false);

Note that this has to be done after the element is added to the document, before that the inputField property will not be defined (corresponding XBL binding didn't apply yet).

For reference: menulist.inputField, input event