Using the typeahead form field, how can I filter the options that are coming from a data source?

Get Help
1

As the question states, I’m using the typeahead field in the form component and loading values from a data source.

I want to be able to filter and only show some values - imagine I have a list of countries and want to only show countries in Europe. In my data, for each country, I have another column for the region of the country to use as a filter.

Is there a way to do this?

2

Yes, this can be done relatively easy, using some custom code.
Let’s say we have data source ‘Countries’ with the next structure:

image
image763×697 18.9 KB

So first of all we need to select the right option in the typeahead form field’s settings:

image
image614×896 41.5 KB

“Select type of suggested values” should be equal to “List of values”
Then we should paste the next code into the screen JS

Fliplet.FormBuilder.get().then(function (form) {
  return Fliplet.DataSources.connectByName('Countries').then(function (connection) {
    return connection.find({
      where: {
        'Region': 'Europe'
      }
    }).then(function(EuropeanCountries){
      //an array of countries names will be created
      let options = _.map(EuropeanCountries, function(record){ return record.data['Country'] });
      
      //this code updates the options of the multiselect form field
      form.field('Typeahead').options(options.length ? options : []);
      return Promise.resolve(true);
    });
  });
});

There are several variables in this code that have to be updated:

  1. ‘Countries’ - data source name with the list of countries. Please make sure the data source has security rules to be able to read from it
  2. ‘Region’ - column name in ‘Countries’ data source, where the value of region is stored
  3. ‘Europe’ - the value of region to be filtered by
  4. ‘Typeahead’ - the name of a typeahead form field, by default is equal to ‘Field label’ unless other is specified

As a result you should see the list of countries filtered by ‘Region’ = ‘Europe’
image