How to build a lookup search functin using ag-grid CustomFilterComponent

Question

I have this example:

https://embed.plnkr.co/iUrXZcG14lzhpD5Ofa3z/

which shows a table with its columns, what i need is building a search lookup function instead of

Answer 1

Firstly, your mapping array is incorrectly formatted, change it the following:

  [{
    key: 'michael',
    value: 'michael',
    tokens: ['michael', 'mich', 'ael', '+0912312321'],
  },
  {
    key: 'natalie',
    value: 'natalie',
    tokens: ['natalie', 'lie', '+091212'],
  }]

What you need to do is create your own custom search filter. This is easy using ag-Grid, see here. With your custom filter, you then need to then decide for each row whether it should be filtered or not using mapping array.

In your doesFilterPass function in your custom filter component, your logic should look something like this:

PersonFilter.prototype.doesFilterPass = function (params) {
  // make sure each word passes separately, ie search for firstname, lastname
  var valueGetter = this.valueGetter;

  console.log(valueGetter(params))

  let acceptableFilterValues = [];
  const filterDataForValue = filterData.find(x => x.value == valueGetter(params).toLowerCase());


  if (!filterDataForValue)
  { 
    return false; 
  } 
  
  const tokensForFilterValue = filterDataForValue.tokens;

  return tokensForFilterValue.indexOf(this.filterText) > -1;
};

Take a look at this Plunker demonstration. Click on the filter icon on the name column.