javascript - Mottie虚拟键盘和选择器

我正在尝试使以下两个出色的jQuery插件一起工作。


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


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

我的主题JavaScript是：

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

知道为什么吗？两位开发者（@mottie）可能会回答这个问题

PS：因为需要10点才能发布图像，所以我将它们作为链接。

最佳答案

您需要使用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;
}

关于javascript - Mottie虚拟键盘和选择器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29298356/