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

您可以使用我的插件，看一下示例：4'th column

以下是我的插件github的链接：

Yet Another DataTables Column Filter - (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"}]);
});

Answer 2

可能为时已晚，但经过如此多的研究和谷歌搜索，我最终编写了自己的自动完成功能。这有点乏味，但好处是有效。首先我构建了包含表格所有列的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();        
});

自动完成数据表jquery搜索

2 个答案: