停止定制从失去焦点

我想自定义数据表搜索框，以便更好地将它集成到一个引导基于UI数据表搜索框。我有一个表控制栏'horicontal_group'，其中包含我想放置搜索框的其他控件。它尽可能生成过滤事件，但有一个非常恼人的问题：停止定制从失去焦点

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

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

这是DOM怎么看起来像使用默认的 'F' 选项，在数据表的sDom：

这是想什么，我有：

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（）解除绑定在输入字段中的事件结合之前的新的
使用。对代替.bind（“输入” ..）（“按键KEYUP” ..）
追加整个dataTables_filter div来horicontal_group，而不是仅仅输入字段

来源

2013-10-25 Michel Müller

好吧，在写这个，我想过这个问题多一些，我来到我要离开这里的解决方案。使用内置的wrapper-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();

来源

2013-10-25 16:10:28

停止定制从失去焦点

回答

相关问题