5

我想实现自动完成http://jqueryui.com/autocomplete/来过滤每一列

在数据表 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

2 回答 2

2

你可以使用我的插件，看看例子：4'th column

这是我的插件的github链接：

另一个 DataTables 列过滤器 - (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"}]);
});
于 2013-06-24T14:09:05.687 回答
0

可能为时已晚，但经过大量研究和谷歌搜索后，我最终编写了自己的自动完成功能。这有点乏味，但好处是它有效。首先我构建了包含表格所有列的 js 数组。保留数组作为自动完成我自己的文本框的来源并将其用于搜索。一个技巧是在 td 标记内嵌入一个锚标记，以便将焦点设置在搜索的文本上。oTable 是我的数据表。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();        
});
于 2015-07-16T05:33:31.203 回答