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

Question

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

搜索框失去焦点，每次调用过滤器函数。

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

这是在数据表的 sDom 中使用默认 'f' 选项时 dom 的样子：

这是我想要的：

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 参数“f”提供的字段（并从 sDom 中删除“f”）
• 对事件使用 stopPropagation()
• 在绑定新事件之前取消绑定输入字段上的事件
• 使用 .on('input' ..) 代替 .bind('keypress keyup' ..)
• 将整个 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();