Drop down field examples with different options

Notes

These are the default drop down options. On getting focus, the drop down list appears. It filters on what you type. If you exit the field with a value in the field that doesn't exist in the list, the field value will return to the original value that was in the list when you entered it, or it will change to a blank value.

Pressing Escape returns the field the the original value.

See it in action

Code

 
let field1 = DropdownField(
    ".example-container>div>div",
    "Country",
    "Country",
    1,
    "dd1",
    {
        maxLines: 10,
        cssClassList: ["field1"],
    }
)
field1.setList(dropDownOptions)

Notes

In this common example of a country list, typing in au filters on au in any part of the string of the given list. Down and up arrow keys on the list work of course. Enter or the mouse can be used to select an item. Escape takes you back to the filter but if the value in the field doesn't match anything in the list, the field goes back to the original value.

Option for this - searchMode: ""

See it in action

Code

 
let field2 = DropdownField(
    ".example-container>div>div",
    "Country",
    "Country",
    2,
    "dd2",
    {
        maxLines: 10,
        cssClassList: ["field1"],
        searchMode: ""
    }
)
field2.setList(dropDownOptions)
                        

Notes

After typing in ch nothing has been filtered. It starts filtering on the 3rd character.

Option for this - ignoreFirstXCharacters: 2

See it in action

Code

 
let field3 = DropdownField(
    ".example-container>div>div",
    "Country",
    "Country",
    3,
    "dd3",
    {
        maxLines: 10,
        cssClassList: ["field1"],
        ignoreFirstXCharacters: 2
    }
)
field3.setList(dropDownOptions)                                    

Notes

After typing in each letter, the blue bubble above the field suggests the first item in the filtered list. After typing in au, it suggests Australia. If you tab out of the field, it becomes the value of the field saving you time and allowing you to use the field faster.

Option for this - autocomplete: true

See it in action

Code

 
let field4 = DropdownField(
    ".example-container>div>div",
    "Country",
    "Country",
    4,
    "dd4",
    {
        maxLines: 10,
        cssClassList: ["field1"],
        autocomplete: true
    }
)
field4.setList(dropDownOptions)
                                                

Notes

The arrow on the right of the field by default is displayed but you can turn it off. Enter can be used to toggle the list to display or make it disappear. The number of lines can be what you want but it is suggested you don't choose more than 12, otherwise it doesn't fit on webpages especially when the drop down is on a page that's scrolled down and the field is near the bottom of the page. Here we are choosing five lines to display in the list.

Option for this - maxLines: 5, showDropdownArrow: false

See it in action

Code

 
let field5 = DropdownField(
    ".example-container>div>div",
    "Country",
    "Country",
    5,
    "dd5",
    {
        cssClassList: ["field1"],
        maxLines: 5,
        showDropdownArrow: false
    }
)
field5.setList(dropDownOptions)
                                                            

Notes

When pressing the Enter key, by default, it toggles the drop down list, mouse click as well toggles the drop down list by default, you can turn this off.

Option for this - enterToggleDropdown: false, onClickToggleDropdown: false

See it in action

Code

 
let field6 = DropdownField(
    ".example-container>div>div",
    Country",
    Country",
    6,
    dd6",
    {
        maxLines: 10,
        cssClassList: ["field1"],
        enterToggleDropdown: false,
        onClickToggleDropdown: false
    }
)
field6.setList(dropDownOptions)
                                                                        

Notes

On entering the drop down field, (either by tab or by mouse click), the drop down list shows by default. This can be turned off. If it's turned off, other options may show the drop down list but that would be after entering the field, such as on typing, on pressing Enter.

Option for this - onFocusOpenDropdown: false

See it in action

Code

 
let field7 = DropdownField(
    ".example-container>div>div",
    Country",
    Country",
    7,
    dd7",
    {
        maxLines: 10,
        cssClassList: ["field1"],
        onFocusOpenDropdown: false
    }
)
field7.setList(dropDownOptions)
                                                                                    

Notes

In this example, we are using a month list to show how powerful these options can be. A number of options are used together to get this easy to use Month list field. WIth arrrow key options, you have three options which make arrow keys very nice to use in selecting from a drop down list. You can have the option of not showing the drop down, this is ideal when you know the list order for something like month list or numbers. Arrow keys can be used to go up or down the list without even looking at the drop down list. It can make it faster to use. You can use this option together with autocomplete.

Option for this - onFocusOpenDropdown: false,typingOpenDropdown: false,arrowKeysNoDropdown: 2,autocomplete: true,enterToggleDropdown: false

See it in action

Code

 
let field8 = DropdownField(
    ".example-container>div>div",
    Country",
    Country",
    8,
    dd8",
    {
        maxLines: 10,
        cssClassList: ["field1"],
        onFocusOpenDropdown: false,
        typingOpenDropdown: false,
        arrowKeysNoDropdown: 2,
        autocomplete: true,
        enterToggleDropdown: false
    }
)
field8.setList(monthList)
                                                                                                

Notes

This is a time list selector. The time list is every 15 minutes. The field width can be adjusted. Using the up arrow loops through the list to get to PM straight away. If I want 10:15 PM, I would type in 10 and ↑, ↑ and tab out of the field. Autocomplete is very handy here. A class is used for the width and height of the field.

Option for this - maxLines: 6,cssClassList: ["time-field"],onFocusOpenDropdown: false,typingOpenDropdown: false,arrowKeysNoDropdown: 2,autocomplete: true,enterToggleDropdown: true

See it in action

Code

 
let field9 = DropdownField(
    ".example-container>div>div",
    "Start Time",
    "Start Time",
    9,
    dd9",
    {
        maxLines: 5,
        cssClassList: ["field1"],
        onFocusOpenDropdown: false,
        typingOpenDropdown: false,
        arrowKeysNoDropdown: 2,
        autocomplete: true,
        enterToggleDropdown: false
    }
)
field9.setList(timeList)