DataTable FAQ - Update search when changing input, textarea and selected text (dropdown menu)

When changing input and selected text (dropdown menu) in datatable, datatable should immediately
update the search.
For column with selected text from dropdown with select tag:
a) get value for search
     $.fn.dataTableExt.ofnSearch['html-select'] = function(sData) {
        return $("<div/>").html(sData).find(':selected')
                            .text();
     };
b) update when select change
    $('#'+tableId).find("td select").on('change', function() {
          var $td = $(this).closest('td');
          var value = this.value;
          $td.find('option').each(function(i, o) {
            $(o).removeAttr('selected');
            if ($(o).val() == value){ $(o).attr('selected','selected');}
          })
          $td.find('select').val(value);
           table.cell($td).invalidate().draw();             
       });    For column with input and textarea  tag:   
a) get value for search   
     $.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
        return $(value).val();
     };       
b) update when input change
    $('#'+tableId).find("td input").on('change', function() {
        var $td = $(this).parent();
             $td.find('input').attr('value', this.value);
           table.cell($td).invalidate().draw();
    });
c) update when textarea change
      $("#result").find('#'+tableId).find('textarea').on('change', function() {
        var $td = $(this).parent();
       $td.find('textarea').text(this.value);
       table.cell($td).invalidate().draw();          
    });    
Example JS code is as following (assume 9th column (column=8) with select dropdown
and third column (column=2) with input, 10thcolumn (column=9) for textarea), assume table id is defaultTable:   

     $.fn.dataTableExt.ofnSearch['html-select'] = function(sData) {
        return $("<div/>").html(sData).find(':selected')
                            .text();
     };
     $.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
        return $(value).val();
     };       
    var tableId='defaultTable';
    table= $("#result").find('#'+tableId).DataTable( {
                                     destroy: true,
                                    paging: false,
                                    columnDefs: [
                                       { "type": "html-select", "targets": [8] },
                                        { "type": "html-input", "targets": [2,9] }
                                    ],
                                fixedHeader: true
                            } );   
                           
    $('#'+tableId).find("td input").on('change', function() {
        var $td = $(this).parent();
             $td.find('input').attr('value', this.value);
           table.cell($td).invalidate().draw();
    });
     $("#result").find('#'+tableId).find('textarea').on('change', function() {
        var $td = $(this).parent();
       $td.find('textarea').text(this.value);
       table.cell($td).invalidate().draw();          
    });    

    $('#'+tableId).find("td select").on('change', function() {
          var $td = $(this).closest('td');
          var value = this.value;
          $td.find('option').each(function(i, o) {
            $(o).removeAttr('selected');
            if ($(o).val() == value){ $(o).attr('selected','selected');}
          })
          $td.find('select').val(value);
           table.cell($td).invalidate().draw();             
       });