停止自定义数据表搜索框失去焦点

Question

我正在尝试自定义数据表搜索框，以便更好地将其集成到基于引导程序的UI中。我有一个表格控制栏＆＃39; horicontal_group＆＃39;包含其他控件，我想放置搜索框。它可以生成过滤事件，但有一个非常烦人的问题：

每次调用过滤器功能时，搜索框都会失去焦点。

这是一个权宜之计，因为我喜欢预先输入功能，而不是让用户点击按钮进行搜索。我当然也会在按键和过滤事件之间实现延迟，但首先我必须处理这个焦点问题。

这就是dom使用默认＆＃39; f＆＃39;数据表中的选项＆s; som：

这就是我想要的：

wrapper_div.find('.dataTables_filter input')
.addClass('form-control tableview-search')
.appendTo(horicontal_group) //if this is uncommented, it works fine
.bind('keypress keyup', function(e){
   datatable.fnFilter(searchTerm);
});

到目前为止我尝试过的事情（对结果没有任何影响）：

• 使用新创建的输入字段，而不是sDom-parameter提供的字段＆＃39; f＆＃39; （并删除＆＃39; f＆＃39;来自sDom）
• 对事件
使用stopPropagation（）
• 在绑定新的事件之前取消绑定输入字段上的事件
• 使用.on（＆＃39;输入＆＃39; ..）代替.bind（＆＃39; keypress keyup＆＃39; ..）
• 将整个dataTables_filter div附加到horicontal_group而不仅仅是输入字段

Answer 1

好的，在写这篇文章时我已经考虑了一些，我找到了一个解决方案，我将要离开这里。使用内置的wrapper-div并使其适应引导程序，而不是从头开始重新创建它，解决了我的问题。如果您对失去焦点的原因有更深入的了解，我仍然会对您的意见感到高兴。

我现在就像这样初始化sDom：

sDom: '<"row"<"col-lg-12 col-tableview-controls"f>><"row"<"col-lg-12"RlrtiS>>'

在初始化dt后，我修复了这样的dom（请注意，我还使用了此主题中的合并搜索框：Add Bootstrap Glyphicon to Input Box：

var horicontal_group = wrapper_div.find('.dataTables_filter');
horicontal_group.addClass('input-group pull-right horicontal-group');
var merged_input = $("<div class='input-group merged'><span class='input-group-addon search-addon glyphicon glyphicon-search'></span></div>")
.appendTo(horicontal_group);
var input = horicontal_group.find('input');
input.addClass('form-control tableview-search')
.appendTo(merged_input)
.on("focus blur", function() {
    $(this).prev().toggleClass("focusedInput")
});
var label = horicontal_group.find('label');
label.remove();