如何以编程方式打开 Dojo djFilteringSelect 下拉列表

Question

好的，这应该是可行的——而且非常简单，只要知道如何获取 djFilteringSelect 对象的句柄。

用例：我已经接管了扩展现有 XPage 的请求，该 XPage 具有下拉值列表的功能，不仅在用户单击 djFilteringSelect 输入字段右侧的小箭头时，而且在用户单击只需点击该字段。此 XPage 的大部分初始条目都是在制造现场完成的（使用触摸屏 - 没有鼠标/键盘）。随后的处理由使用“普通”计算机的用户完成。

所以我尝试“捕捉”“click”、“mousedown”或“mouseup”事件。我可以做到这一点 - 但我无法掌握我知道的过滤选择有一个方法“openDropDown（）”，它可能会做我需要做的事情......我也尝试过模拟按键事件“arrowdown”如果我这样做也会提供相同的体验...我什至尝试延迟按键事件并添加一些上下文 - 但没有任何效果。

所以这是我目前非常简单但不起作用的示例：

                <xe:djFilteringSelect id="Antal" defaultValue="1">
                    <xp:selectItems id="selectItems13">
                        <xp:this.value><![CDATA[${javascript:var values=[];var i=0;while(i<=20){values.push(''+i++)};return values;}]]></xp:this.value>
                    </xp:selectItems>
                    <xp:selectItem itemLabel="20+"></xp:selectItem>

                    <xp:eventHandler event="onKeyUp" submit="false">
                        <xe:this.script><![CDATA[console.log("keyUp=" + thisEvent.keyCode)]]></xe:this.script>
                    </xp:eventHandler>
                    <xp:eventHandler event="onMouseDown" submit="false">
                        <xe:this.script><![CDATA[var ct = thisEvent.currentTarget;
var se = thisEvent.srcElement;
var te = thisEvent.toElement;
setTimeout(function(ct,se,te){
var keyboardEvent = document.createEvent("KeyboardEvent");
var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

keyboardEvent[initMethod](
                   "keyup", // event type : keydown, keyup, keypress
                    true, // bubbles
                    true, // cancelable
                    Window, // viewArg: should be window
                    false, // ctrlKeyArg
                    false, // altKeyArg
                    false, // shiftKeyArg
                    false, // metaKeyArg
                    40, // keyCodeArg : unsigned long the virtual key code, else 0
                    0 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
);
/// Hmmmm... not working
keyboardEvent.currentTarget = ct;
keyboardEvent.srcElement = se;
keyboardEvent.toElement = te;
console.log('Fire arrow down key...');
document.dispatchEvent(keyboardEvent);
},200);
]]></xe:this.script>
                    </xp:eventHandler></xe:djFilteringSelect>

因此，任何想法都会受到赞赏 - 尤其是制造站点中的用户:-)

Answer 1

...不仅可以在用户单击 djFilteringSelect 输入字段右侧的小箭头时下拉值列表，还可以在用户仅单击该字段时。

如果我没看错您的问题，您只想在用户点击该字段时调出下拉菜单。这与您的其他代码不完全匹配，我不知道 dojo 如何解释来自 input 标记的点击事件并通过整个 dijit 工作，但我尝试添加一个事件处理程序，就像我希望用户在点击相应字段时强制触发 xe:namePicker 时使用的那样。

我在您的 xe:djFilteringSelect 中添加了以下内容，它似乎工作正常；无论如何，正如我所期待的那样。

    ....
    <xp:eventHandler
        event="onClick"
        submit="false">
        <xe:this.script><![CDATA[var el = dijit.byId("#{id:Antal}");
el.toggleDropDown();]]></xe:this.script>
    </xp:eventHandler>
</xe:djFilteringSelect>

[更新] 正如我们注意到的那样（在这个答案的 cmets 中），这在弹出窗口 已经 被触发之后才起作用，但不是第一次。解决方案很简单，使用 toggleDropDown() 函数代替 openDropDown()。看起来很可靠，我确认它在新页面加载后可以正常工作，正如预期的那样。与 open 函数相反，toggle 函数似乎会触发组成值列表的 DOM 元素的创建。 [/更新]