How to create a drop down list with a search bar

Hi 

 

I would like to create a search bar - like on the flight booking websites. Where you can simply type three letters to pull up the item from a large list. 

 

Many thanks 

 

Dave

Please try out our AutoComplete Widget: http://widgets.jotform.com/widget/autocomp. This widget should allow you to type in a letter or two and display a list of items that begin with those letters.

Do let us know if you need further assistance. Thank you.

Hi,

 

The AutoComplete is neat, but is there a method or another widget whereby users cannot type whatever they want outside of the choices?

We have about 600-800 options, the regular dropdown is obviously not relevant in our case.

I'm not sure what you mean "cannot type whatever they want outside of the choices". If you mean you want to restrict the users to enter a type of an item on the autocomplete widget that is not valid, you could try adding validation on your form. For example, you only want a numeric value in the fields, when the user types an alphabetic and hit the submit button, this will prevent them to submit the form.

However, if you mean something else, please clarify a bit more and let us know if you need further assistance.

Regards.

Sorry let us rephrase that:
1. We would like users to only be able to type and select available options.
2. The problem now is we realise users can type anything apart from the
given options and click submit.
3. We can't really use the aforementioned restriction, as some may need to
use numerals and/or alphabetical (since this is road addresses)
- We cannot use dropdown as it will show 800+ options.
- Right now we condition if it contains 'Maverick Road' (and Maverick Road
is available as an option in the AutoComplete) it will be $5.00. But if
users type 12B Generic Road (not in our directory of options) yet they can
still submit and it bypass our charges condition.
- Roads here contains numerals and alphabetical
...

You can try adding a condition on your form that if an item is not chosen on the widget, the Submit button will be hidden, preventing the users to submit the form if they enter a not valid option.

For example:

Here's the guide on How to Show or Hide Fields Base on User's Answer.

Please see the screencast of my demo form below:

Regards.