Drop Down With manual input

Discussion Ask a question
,
1

Hi all ,

In my project i require a drop down which shows the values depending on the manual input field after serching in a database .

like suppose i have a list of countries names in my db.
Now suppose 1st user want to input Maldives so he start typing the name M the A then L in the drop-down input field , when three charters are input the drop-down would have already searched the db and would have shown the user if there is any of the option available. Now the user can select Maldives or also can type and press enter to proceed.

Now suppose 2nd user want to search “Malta” and he does the same put three chracters, since the DB doesn’t have malta value in the list the 2nd user shall be able to input the complete word and press next to proceed.

can anyone help me in achieving this functionality using wix ,i can code it but not sure how to start and what approach to apply , as in wix dropdown there is no such dropdrown which can take input .

Thanks for all the help and support . I am highly thankful.

Regards
Jap

2

Hi all ,

help for this item … :(… really stuck up with this

regards
Jap

3

Hi Jap,
since the dropdown component does not allow to type, you will need to improvise a bit.
instead of a dropdown, we’ll use a text input and a few button components below it.

the general idea is this:

  1. the input component is where the user types
  2. below that component, place 3 (or whatever number makes sense for you) buttons.
    these buttons will be hidden when the page loads.
  3. whenever the text in the text input changes, perform a query to the collection to get items that start with the string the user has types so far.
  4. when you have the results, change the labels of the buttons accordingly, and show them.
    show only the number of buttons that you need (e.g. if you got just 1 result from the query, only show the top button)
  5. when the user selects (i.e. clicks) the button, use its value and place it in the input component

the relevant APIs are all there (onKeyPress for the input component, onClick for the buttons, show/hide, etc.)

see if this gets you in the right direction…

good luck!

p.s.
it might be a bit too slow to perform a query each time the user presses a key.
if you feel it’s too slow, you can try to preload the data from the collection to the browser when the page loads, and perform the string matching in memory.
[this assumes the number of items in the collection is relatively small, i.e. less than 500].