[LazyDropdownSearch] Support search the text as it is instead of must pick one of the dropdown item

Forge Component
(10)
Published on 24 Apr by Steven Decock
10 votes
Published on 24 Apr by Steven Decock

Hi Steven,


My use case is to type ahead search and the auto suggest data source is coming from external REST API. In my app, the "OnFilterValueChanged" event handler will refresh the auto response data action to get updated auto suggest list.

  • [Already Working] - If the search query to be submitted is within the auto suggest list, the user can press "down arrow key" to select and hit "Enter" button to search
  • [Not available Yet] - if the search query is not within the auto suggest list, the user should just be able to hit "Enter" key to submit the query as it is
    • [Not available Yet] - Related to the above point, the user should be able to just past the search query into the search input and hit "Enter" to start search. At the moment, if I paste the text into the search input, it is not doing anything. I believe the "OnFilterValueChanged" event is not triggered if the test is pated in. Because if I hit a space bar to add an space after I paste the text, the "OnFilterValueChanged" is triggered and shwoing the auto suggest list.

Could you please help or advise how can I achieve the above requirements?


Regards,

George Qiao

Solution

Hi George,

What you are talking about is autocomplete functionality.  I would not implement this with this component.

This component is essentially a dropdown.  A dropdown means that you select one of the values that the component proposes.  You cannot select your own value in that case.

What you need is an autocomplete or suggestion box.

I created another component for this use case: ReactiveAutoComplete.

This is a component that you put next to a text field and that shows a list of suggestions.  You are free to select one of the suggestions, or you type whatever other value you like.

I published the component as 'Under development'.  This means it's not heavily tested yet.

But you can use it.  Any feedback is welcome.


Regards,

Steven Decock

Solution

Thanks so much, Steven. You are awesome!


Regards,

George