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

Question

我试图自定义datatables搜索框，以更好地将其集成到基于Bootstrap的UI中。我有一个表控制栏“horicontal_group”，其中包含其他控件，我想把搜索框放在那里。就我所知，我可以生成过滤事件，但是有一个非常恼人的问题：每次调用过滤函数时，搜索框都会失去焦点。

这只是一种权宜之计，因为我想要自动完成功能，而不是让用户点击按钮进行搜索。当然，我还会实现按键和过滤事件之间的延迟，但首先我必须处理这个焦点问题。

这是使用datatable's 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而不仅仅是输入字段

- Michel Müller

Answer 1

好的，在写这篇文章时，我考虑了一些更多的内容，并且我想把我的解决方案留在这里。使用内置的包装器div并将其适应于Bootstrap，而不是从头开始重新创建它，解决了我的问题。如果您对为什么失去焦点有更多见解，我仍然很高兴听取您的意见。

现在，我这样初始化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();

- Michel Müller