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

Question

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

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

所以我尝试 "catch" "click"、"mousedown" 或 "mouseup" 事件。我可以做到这一点 - 但我无法掌握我知道的 filteringselect 有一个方法 "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

...to drop down the list of values not only if the user clicks the small arrow to the right of the djFilteringSelect input field - but also if the user just clicks on the field.

如果我没看错你的问题，你只是想在用户点击该字段时弹出下拉菜单。这与您的其他代码不完全匹配，我不知道 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>

[更新] 正如我们注意到的（在对此答案的评论中），这在弹出 already 被触发后起作用，但不是第一次。解决方案非常简单，使用 toggleDropDown() 函数代替 openDropDown()。看起来非常可靠，我确认它在重新加载页面后可以正常工作，正如预期的那样。似乎 toggle 函数将触发构成值列表的 DOM 元素的创建，而不是 open 函数。 [/更新]

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

How to programmatically open a Dojo djFilteringSelect drop down list

javascript

dojo

xpages