JQuery Virtual Keyboard和Datatables.js搜索过滤器框未更新用户输入

时间:2017-09-11 19:16:30

标签: javascript jquery html datatable keyboard

我的datatables.js应用程序可以在jquery虚拟键盘上运行。使用虚拟键盘在生成的搜索框中输入信息时,过滤的内容不起作用。这意味着如果我有一个列names并使用虚拟键盘搜索名称(例如Airi),则数据表中的信息不会更新。如果我删除它就可以了。

我用于数据表的代码如下:

$(document).ready(function(){
  $('.selectpicker').selectpicker();
  $('#example').DataTable();
  // example for the virtual keyboard on datatable search
  // this shows the keyboard but the content is not filtered
  function virtualKSearch() {    
        $('input[type="search"]').keyboard({
                layout: 'qwerty',
                draggable: true,
                position: {
                  of : $(window),
                  my : 'center bottom',
                  at : 'center bottom',
                  at2: 'center bottom'  
                },
                change: function(e, keyboard, el) {
                  keyboard.$el.val(keyboard.$preview.val())
                  keyboard.$el.trigger('propertychange')        
                },
                reposition: true
         }).addTyping();
      }
  // example for the bootstrap select keyboard, this works
  $('input[role="textbox"]').keyboard(
    {
      layout: 'qwerty',
      position: {
          of: $(window), 
          my: 'center bottom',
          at: 'center bottom',
          at2: 'center bottom'
      },
      change: function(e, keyboard, el) {
        keyboard.$el.val(keyboard.$preview.val())
        keyboard.$el.trigger('propertychange')        
      }
    })
    .addTyping();

  // datatable example
  virtualKSearch();

});

起初我认为它与propertyChange有关,但经过一些修改后似乎并非如此。虽然我认为问题可能在键盘设置中的change属性内。

可以在此笔中复制内容:

https://codepen.io/AlecX4/pen/YrKYPv

非常感谢任何提示或建议。

1 个答案:

答案 0 :(得分:1)

实际上,我设法解决了这个问题。对于任何陷入困境的人来说......解决方案非常简单:

更改

              keyboard.$el.trigger('propertychange')        

              keyboard.$el.trigger('input')