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;
}

Mottie虚拟键盘和选择选择器

1 个答案: