javascript - Bootstrap Select 与 JQuery 虚拟键盘发生冲突

Question

这是一个很好的。基本上，我特别使用两个库来获得我想要的东西。 Bootstrap 选择:

https://silviomoreto.github.io/bootstrap-select/

和 JQuery 虚拟键盘:

https://mottie.github.io/Keyboard/

(添加了链接，以防有人发现它们对他们自己的东西有用)

我使用 bootstral select，因为作为选择组显示的查询数据非常大，因此在其中添加一个输入字段实用程序以简化我们的用户是有意义的。我们还需要一个虚拟键盘，这正是我们添加 jquery 插件的原因。问题是当我们触摸选择输入并且键盘出现时，无论我们输入什么都不会被过滤。也没有添加，到目前为止，键盘似乎只适用于常规输入文本字段

在最简单的形式中，这是我用来生成键盘以及初始化选择器的代码:

let virtualK = ()=> {
    $('.buscame')
          .keyboard({
            layout: 'qwerty',
            position: {
              of : $(window),
              my : 'center bottom',
              at : 'center bottom',
              at2: 'center bottom'  
            }
          })
          .addTyping();
  }
  $(document).ready(function(){
    $('#example').selectpicker({});
    $('#Transfer').selectpicker({});
    $('#Chofer').selectpicker({});
    $('#Transportista').selectpicker({});
    $('#localidad').selectpicker({});
    $('#Cliente').selectpicker({});

    // Initialize the keyboard
    virtualK();
  });

至于select标签，代码是这样写的:

<select name="Transfer" size="1" id="Transfer" class="form-control select-picker buscame" data-live-search="true" required onChange="javascript:OnChangeOperador()">

我面临的另一个问题是，如果我尝试通过传递 .buscame 作为标识符来运行 JS 代码，那么键盘不会显示，如果我选择通用标识符 input 有效。 bootstrap select 的文档没有显示任何为其自动生成的输入框添加 id 的方法，因此这似乎不是一个选项(如果有人知道，请告知)

那么，有谁知道让虚拟键盘在自定义选择的内部搜索框上工作的方法吗？或者如何给生成的输入过滤字段添加一个id？

编辑:

我试过用

let virtualK = ()=> {
    $('input[role="textbox"]')
          .keyboard({
            layout: 'qwerty',
            position: {
              of : $(window),
              my : 'center bottom',
              at : 'center bottom',
              at2: 'center bottom'  
            }
          })
          .addTyping();
  }

但它的作用是一样的，虚拟键盘会打开，但无论我输入什么都不会被过滤。

我花了一些时间，因为 jsfiddle 和 jsbin 很有趣，但这里是这个问题的重现:

https://codepen.io/AlecX4/pen/vJvmLb?editors=0000

Answer 1

您需要设置相关输入的值并触发该输入的 propertychange 以告知 bootstrap-select 输入的值已更改。

change: function(e, keyboard) {
    keyboard.$el.val(keyboard.$preview.val())
    keyboard.$el.trigger('propertychange')        
  }

这是对您的代码笔的更新:
https://codepen.io/anon/pen/EvGpvz