[英]Auto complete with datatables jquery search
我想實現自動完成http://jqueryui.com/autocomplete/來過濾每一列
在datatables jquery插件中。
例如,如果我想在數據表搜索中搜索嵌入式設備ED,它將不會為我做...所以我想顯示自動完成,當用戶從列表中選擇它然后我想要數據表過濾。
var oTable = $('#listings_row').dataTable( );
$("thead input").keyup( function (
oTable.fnFilter( this.value, parseInt($(this).attr('id')) );
} );
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("#listings_row thead input").index(this)];
}
} );
我怎么能這樣做?
您可以使用我的插件,看看示例:第4列
這是我的插件的github的鏈接:
這是一個代碼片段,只需在相關列中設置enable_auto_complete: true
(在下面的代碼column_number : 3
):
$(document).ready(function(){
$('#example').dataTable().yadcf([
{column_number : 0},
{column_number : 1, filter_container_id: "external_filter_container"},
{column_number : 2, data:["Yes","No"], filter_default_label: "Select Yes/No"},
{column_number : 3, text_data_delimiter: ",", enable_auto_complete: true},
{column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);
});
這可能為時已晚,但經過如此多的研究和谷歌搜索,我最終編寫了自己的自動完成。這有點乏味,但好處是它有效。首先我構建了包含表的所有列的js數組。保持數組作為自動填充我自己的文本框的源並用於搜索。 一個技巧是在td標簽內嵌入一個錨標簽,以便能夠將焦點設置在搜索到的文本上。 oTable是我的datatable.myInputTextField是開箱即用的輸入框,我可以搜索文本。要啟用像自動完成的Facebook,請使用框中的@。
$("#myInputTextField").autocomplete({
source:filterFieldValues,
select:function(event,ui){
{
if(ui!=null&&ui.item!=null){
var searchedColumnValue=ui.item.value;
if(searchedColumnValue!=null||searchedColumnValue!=''){
$("#myInputTextField").val('');
$("#myInputTextField").val(searchedColumnValue.trim());
var colValue=$("#myInputTextField").val();
$("a:contains('"+colValue+"')").parents("td").toggleClass("focus");
oTable.search($(this).val()).draw();
window.setTimeout(function(){
$("a:contains("+colValue+")").focus();
}, 5);
}
}
}
},
focus:function(event,ui){
}
}).autocomplete('disable')
.on('keypress', function(e) {
evt=e||window.event;
var code = evt.charCode || evt.keyCode;
//Detect whether '@' was keyed.
if (evt.shiftKey && code === 64) {
$(this).autocomplete('enable');
return false;
}
oTable.search($(this).val()).draw();
});
$("#myInputTextField").blur(function()
{
$("#myInputTextField").autocomplete('disable');
oTable.search($(this).val()).draw();
});
$('#myInputTextField').on('input propertychange paste', function() {
oTable.search($(this).val()).draw();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.