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

0

手遅れかもしれませんが、多くの調査とグーグル検索の後、私は自分のオートコンプリートを作成することになりました.少し退屈でしたが、良いことはそれが機能することです.最初に、テーブルのすべての列を含むjs配列を構築しました.配列を保持します自分のテキストボックスをオートコンプリートするためのソースとして、検索に使用しました。1 つのトリックは、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 に答える