Autocomplete as a Textbox

1
Hello, I’m facing an issue related the Autocomplete widgets that are available in the marketplace : Autocomplete & Multiselect :  https://marketplace.mendix.com/link/component/116541 : doesn’t have the functionnalities that i need  AutoComplete widget https://marketplace.mendix.com/link/component/2695 : the best suited for my need but the UI/X isn’t what i need, the way it works is first a dropdown button then a textbox is shown to type into and if no result is found you can’t just show the text you typed instead. I need it to look like a regular Textbox with a suggestion list based on what you type (it uses an API to suggest the autocomplete base on what we type) and if no results is found just leave the text typed on the textbox there. (kinda like the google search textbox)   I don’t have much experience on JS  to build a custom widget, anyone have a solution that can help ?  Much appreciated.   Edit : i need it to look like this        
asked
2 answers
2

Hey there, i have just the concept for you! I will give you the rough outline:

The concept is based on the combination of a SearchFunction entity and SearchResults with Associated entities that you found

  1. Create a non persistent entity for a searchfunction
    1. string for search value
    2. boolean for showing results condition
  2. Create a non persistent entity for searchresults
    1. string attribute for the display value
    2. Association to entity you want to select
    3. Association to searchfunction entity
  3. Add a dataview with a datasource microflow to create the searchfunction entity
    1. Add a textbox for the search value
    2. Add an on change flow that uses the search value to run a contain() function within a Xpath database retrieve in which you search on the values you want to match
      1. f.e. if you want to check on first names you would do something like: contain($entity/firstname, $searchfunction/searchvalue)
    3. All found results are iterated into search result entities and linked to the searchfunction entity and the original entity (so you can find the result later)
  4. Add a listview underneath the textbox
    1. conditional visibility for showing the listview
    2. on click flow that retrieves the entity associated to the search result and sets the association

This is somewhat the outline, you could build it in such a way that you can reuse it in different places

answered
0

Coming into this a bit late, but I had a similar issue to the OP, and solved it by adding an "extra" option to the final result of options from the API which has the value entered in the search box.

 

image.png

 

My lookup places the result in the "Address" field, and then copies it to "Label", while the item I add has the "Address" being the value entered, and the "Label" being Use "<entered value>"

 

image.png

image.png

answered