CODEWITHSUNDEEP
javascriptxul
user797257
user797257

Reputation:

XUL menulist, open programmatically

I want to mimic the behavior of autocompletion in the menulist XUL item (the original autocompletion component is too impractical for my case, so it's actually easier to use this then create a whole XPCOM component).

The problematic part is, however to cause it open the drop-down part of it, where it displays the options programmatically. I.e. I don't want to have to press down arrow button to open it, I'd like it to open (or close if there's no matching option) as I type into it. Since I can handle inputting text, I'd like in the same handler to open/close the drop-down part, is there a way to do it?

EDIT

Below is the simplified example of the XUL file I'm using for the component:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<dialog id="whatever" title="Select a tab to open"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        buttons="accept,cancel"
        buttonlabelcancel="Cancel"
        buttonlabelaccept="Save"
        ondialogaccept="return doOK();"
        ondialogcancel="return doCancel();">
  <dialogheader title="Select tab"/>
  <menulist id="search-box" editable="true"
            oncommand="commandHandler(event)"
            onkeyup="keyUpHandler(event)"/>
  <script>
    var a = window.arguments[0];
    var opener = window.arguments[1];
    var menu = document.getElementById('search-box');

    function doOK()
    {
        opener.selectTabAtIndex(a.indexOf(menu.value));
        return true;
    }

    function doCancel(){ return true; }

    function commandHandler(event)
    {
        doOK();
        window.close();
    }

    function keyUpHandler(event)
    {
        var v = menu.value;
        menu.removeAllItems();
        populate(a.filter(function (x, i)
        {
            if (x == v) opener.selectTabAtIndex(i);
            return x.indexOf(v) > -1;
        }));
    }

    function populate(choices)
    {
        for (var i = choices.length - 1, s; i >= 0; i--)
        {
            s = choices[i];
            menu.appendItem(s, s);
        }
    }
    menu.focus();
    menu.select();
    populate(a);
    menu.open = true;
  </script>

</dialog>

As you can see, the menu.open = true has no effect on that.

EDIT 2

I also tried:

var e = document.createEvent("KeyboardEvent");
e.initEvent("keydown", true, false, menu, false, false, false, false, 0, 40);
menu.dispatchEvent(e);

and variations of keydown / keyup / keypress and switching keycode and charcode and yada-yada, all to no effect.

I like the API btw, reminds of old good WinAPI, but not enough useless arguments yet

Upvotes: 1

Views: 614

Answers (1)

Wladimir Palant
Wladimir Palant

Reputation: 57681

It's actually quite trivial, you use the open property:

menulist.open = true;

Your issue is probably that one doesn't expect this property to be read/write and looks for a method instead - but changing the property is indeed the proper way to open the dropdown.

Upvotes: 1

Related Questions