How to bind user defined variable dynamically

See more:

Javascript

As of now, I have a created a below code -

function autoFilter(selfObject, addFilter, dataSource, headerStartsAt ) {

  this.init = function() {
    var filterHolder = document.createElement('DIV');
    filterHolder.id = 'filterHolder';
    dataSource.parentNode.insertBefore(filterHolder, dataSource);
    var filterContent = '<span style="float: left;">Filter By: <select id="CmbSearch">' + 
        '<option value="-1">Global Search</option>';
    var MetaData = [];
    // logic for creating MetaData goes here
    for(var i = 0, j = MetaData.length; i < j; i++ ) {
      if(MetaData[i] == null) continue;
      filterContent += '<option value="' + MetaData[i].columnIndex + '">' + MetaData[i].columnLabel + '</option>';
    }
    filterContent += '</select><input  önkeyup="' + selfObject + '.filterTable(this, \'' + 
        dataSource.id + '\', this.previousSibling.value,' + headerStartsAt + ')" type="text">';
    filterContent += '<input type="button" value="Clear"  önclick="this.previousSibling.value = \'\'; ' + 
        'this.previousSibling.onkeyup();"></span>';
    filterContent += '<span id="TotalCount" style="float: right;">Total Records - ' + 
        (dataSource.rows.length-headerStartsAt) + '</span>';
    filterHolder.innerHTML = filterContent;
  }

  this.filterTable = function(phrase, tableId, searchIn, headerStartsAt) {
   // code for filter table here
  }

  if(addFilter) {
    this.init();
  }
}

The objective of above code is to add search facility dynamically to the exisitng table without extra effort.

Only following line is required to be included in by the developer to add this search/filter facility.

var anyUserObject = new autoFilter('anyUserObject', true, document.getElementById('myDataTable'), 1);

Or below one is also valid usage -

var someObject = new autoFilter('someObject', false, document.getElementById('otherDataTableXYZ'), 3);
document.getElementById('myFilterButton').onClick = someObject.init();

From the above code, I have a problem in the portion which is underlined - the selfObject parameter.

As you can see in the init function, the selfObject is dynamically used to form HTML string, which will execute onKeyUp event. And to add this search facility to multiple table/grid on the page, I need to capture all user defined variables used for creating this object so that those variables can be used in the dynamically generated HTML string.

Question :
Is there any better way of avoiding developers to pass the name of the variable as parameter ?
Or, how to bind/invoke public method within an Object with a dynamically generated code ?

Please advise.

Thanks.
Niral Soni