Searchable dropdown list with an autocomplete feature?

[adhamfaisal]

How to make the dropdown component enable the user to start writing on it with an auto-complete feature, there is an app in the forum with this feature by @navigate:

Autocomplete for input fields

I am working on a project and would like to incorporate autocompletion of input fields. This proved awkward to do via just Javascript, so here is a more Anvil-oriented approach.

for text box input, but, I can’t do that with the dropdown component, because it only allows selection not writing.
Any suggestion?

[meredydd]

You’re right, this isn’t a feature of the built-in DropDown component. You could absolutely build it yourself as a Custom Component, though!

[adhamfaisal]

I will try and get back to you

[shaun]

Here’s a component that provides a list of results when you type into it. It sounds like you’re looking for something similar, so this might help you.

Clone link:

https://anvil.works/ide#clone:IPNZTIMRPTB5GCHY=3JYUOES2P5IWCQYGTJTRILGO|7U6PSZGRIFVZK2OC=JMJOEGMWPOF7CBEUELNF2YNM

---

Some words about how it works:

https://anvil.works/blog/library-search-hints

---

Screenshot:

[adhamfaisal]

Thank you, I will give it a try.

[jan.kyselak]

sorry for this newbie question, this is almost exactly what I was looking for just is there any way to put this function in Dropdown ?

This way when hints appear, other fields are moving up and down, and I can’t use arrows to move between filtered results.

Thanks a lot

Jan

[campopianoa]

@jan.kyselak

If I understand correctly, I think you are asking for a search box that changes the items in a DropDown component.

If so, would something like this work?

clone:
https://anvil.works/build#clone:4PSQWES44HAQSRAV=OTVEQ6D3VVMJQ33US6MUPM4A

It is only a few lines of code but perhaps it could get you started.

[jan.kyselak]

@alcampopiano thank you for your time.

I have found this approach that works best for my project: https://anvil.works/blog/library-search-hints.

But I just can’t figure out how to edit how results are displayed.

• Searching is great, I found out how to search throught multiple data table columns etc.:

• This is what it does when I select result:

• But maybe because it uses external library “Search Hints” I can’t figure out how to achieve this, I need the result in the same field, beacuase it is part of form to get t-shirt quote (I can publish all app if needed):

If somebody could point me in a right direction, it could be great.

Thank you.

[campopianoa]

Hello Jan,

Are you asking how to get the selected text to appear in the seach box, like the following?

If so, you can modify the set_result function in the “Search Hints” app, like this:

def set_result(self, result, **event_args):
  """Set the result in the result box."""
  self.raise_event('x-search-hints-result', result=result)
  self.repeating_panel_results.items = []

  self.text_box_search.text=result # modification to send result to the search box (i.e., the TextBox component)

You always have access to the result that is displayed at the bottom (“Selected Tool: X”), but certainly if you do not want it to show up there, you can remove those components altogether, and still keep track of the result.

For example, if you want to keep track of the selected result, you can always stick it on a tag somewhere, like the following which saves the result to a tag (it is also being printed out just for clarity):

I did this by modifying the update_result_label function in the main app (I’ve renamed it to save_current_result), as follows:

# was originally named "update_result_label"
def save_current_result(self, result, **event_args):
  """Set the result label on this Form to the selected search result."""
    
  self.search_hints_1.tag.my_new_result=result # saving the result by "sticking" it to a component
  print(self.search_hints_1.tag.my_new_result)
  #self.label_result.text = result 

I am not certain that this is what you are trying to accomplish, so please clarify if that is the case.

[jan.kyselak]

this is exactly what I needed.

thanks a lot !