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

问题

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 the default filter function, so that:

if typing the full name michael then the table will be filter by michael, OR if i type the phone number then the name of michael will be filtery by michael. in other word.

There is a mapping array:

    {
key: michael,
value: michael,
tokens:{
    michael,
    mich,
    ael,
    +0912312321
    }}
    ,
    {

key:    natalie,
  value:  natalie,
tokens{
natalie
    lie
    ,
    +091212
}
    }

so instead of the defaul search function i want that the search will be looked up in that mapping object.

回答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.

来源：https://stackoverflow.com/questions/65410978/how-to-build-a-lookup-search-functin-using-ag-grid-customfiltercomponent