自动完成数据表jquery搜索

Question

我想实现自动完成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)];
                }
            } );

我怎么能这样做？

Answer 1

您可以使用我的插件，看一下示例：第四列

这是我的插件的 github 链接：

另一个数据表列过滤器 - (yadcf)

这是一个代码片段，只需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"}]);
});