Typeahead/Select component with remote data source

I am trying to use these components with remote data source but I do not understand how to configure. I think it is better to create a parameter like that:

suspend fun getOptions(search?: String): List<String>

It is more customizable and I can use that with the base component (~remote~).

I have seen the ajax options for the base component, I mean AjaxOptions class, but to separate the UI components from the business logic, I prefer to use a custom service class.

On the other hand, I have not been seeing a function parameter to display each option of the components. I mean I want to include images and more information like a description or a date. Currently, I can only see a list of items.

[rjaros]

Look at this project https://github.com/rjaros/typeahead

[rjaros]

In fact it’s easy to add source parameter to the Typeahead/TypeaheadInput component, because it’s already there in the underlying JS component. I’ve just kept it hidden, because I’ve modeled these components to have similar API to the Select/SelectInput components. I will expose source parameter in the next version.

But note:

1. Source function will not be suspendin, because I’m trying to avoid coroutines dependency whenever possible. So if you like to use remote service you will have to run some coroutines scope:

typeahead(
  label = "Customers",
  source = { search, callback ->
     GlobalScope.launch {
         CustomerService.searchByEmail(search) { customers ->
            val processedData = customers.map { it.email }.toTypedArray() 
             callback(processedData)
         }
     }
  }
)

1. Unfortunately it’s possible only for Typeahead component and not for Select. The Bootstrap Select component does not support dynamic data sources other than those supported by the AJAX extension.