停止定製從失去焦點

我想自定義數據表搜索框，以便更好地將它集成到一個引導基於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

停止定製從失去焦點

回答

相關問題