Mottie 虚拟键盘和选择器

Question

我正在尝试让以下两个优秀的 jQuery 插件一起工作。

• Mottie 的虚拟键盘插件：(github.com/Mottie/Keyboard)
• 一个名为 Chosen 的选择器在用户键入时过滤选项： （harvesthq.github.io/chosen/）这是我的意思的一个例子（当我使用我的物理键盘时）：chosen auto-filtering while typing with physical keyboard

不幸的是，当我使用 mottie 的键盘时，不会发生这种过滤。这是发生的情况的屏幕截图： chosen auto-filtering while typing with mottie fails

我的 mottie javascript 是：

$('input, textarea').keyboard({layout: 'qwerty', usePreview: false, autoAccept: true}).addTyping();

知道为什么吗？大概这两个开发者可以回答这个问题（@mottie）

PS：由于发布图片需要 10 分，所以我将它们作为链接。

Answer 1

您需要使用 select2 open 事件来初始化键盘 (demo)

var keys = {
    bksp: 8,
    tab: 9,
    enter: 13,
    space: 32,
    delete: 46
};

$('select')
    .select2({
        placeholder: "Select a state"
    })
    .on("select2:open", function (e) {
        $('.select2-container--open .select2-search__field').keyboard({
            // Used by jQuery UI position utility
            position: {
                // null = attach to input/textarea;
                // use $(sel) to attach elsewhere
                of: $(document),
                my: 'center bottom',
                at: 'center bottom',
                // used when "usePreview" is false
                at2: 'center bottom'
            },
            reposition: true,
            usePreview: false,
            change: function(e, keyboard, el) {
                var key = (keyboard.last.key || '').toLowerCase();
                // trigger a keydown for "special" keys
                e.type = keys[key] ? 'keydown' : 'input';
                e.which = keys[key] || key.charCodeAt(0);
                keyboard.$el.trigger(e);
            }
        })
        // activate the typing extension
        .addTyping({
            showTyping: true,
            delay: 50
        });
    });

更新：添加了特殊键交互以允许在虚拟键盘上按 Enter 键

包含此 css 以删除蓝色轮廓：

.ui-keyboard-input-current {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}