How to create a drop down list with a search bar

  • Profile Image
    Oxygendesigns
    Asked on April 10, 2014 at 11:25 PM

    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

  • Profile Image
    Cesar
    Answered on April 11, 2014 at 01:01 AM

    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.

  • Profile Image
    BeliBeli24
    Answered on June 13, 2017 at 08:04 PM

    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.

  • Profile Image
    Chriistian
    Answered on June 13, 2017 at 09:25 PM

    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.

  • Profile Image
    BeliBeli24
    Answered on June 13, 2017 at 10:43 PM
    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
    ...
  • Profile Image
    Chriistian
    Answered on June 14, 2017 at 12:09 AM

    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.