# combobox `` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search. ## auro-combobox use cases The `` element should be used in situations where users may: * Search * Airports: user looks for a specific airport by searching for the city name or airport code * Site wide: user searches for a topic site wide and combobox makes suggestions on searchable results * Filter * Options: user chooses filters for their search by using combobox * Select * Quantity: user types a quantity to select an option within a range (for example, the user may be limited to 2-34) ## Example(s)
Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Name Apples Oranges Peaches Grapes Cherries No matching option ``` ### Airports example
Name glacier park international san francisco international gowen field lambert st louis international kelowna international yakima air terminal pullman moscow regional edmonton international tampa international minneapolis st paul international idaho falls regional airport rogue valley international palm springs international guanacaste airport oakland international logan international thurgood marshall international dallas love field santa barbara municipal kansas city international kona international licenciado gustavo diaz ordaz international wrangell deadhorse loreto international nome dwight d eisenhower national philadelphia international dallas fort worth international indianapolis international sacramento international rocky gutierrez unalaska merle mudhole smith james a johnson nashville international spokane international ketchikan international pittsburgh international san luis obispo regional hollywood burbank louis armstrong international paine field cincinnati northern kentucky international yakutat portland international ted stevens seattle tacoma international san diego international san antonio international fresno yosemite international austin bergstrom international ohare international guadalajara international san jose international juneau international roberts field charles m schulz fairbanks international raleigh durham international eppley airfield bozeman yellowstone international ontario international kahului international friedman memorial general rafael buelna international dillingham kodiak denver international manzanillo international los cabos international el paso international airport hartsfield jackson international los angeles international southwest florida international cleveland hopkins international airport ralph wien memorial philip sw goldson international airport pangborn memorial detroit metropolitan bethel ronald reagan national reno tahoe international wiley post will rogers monterey regional honolulu international will rogers world washington dulles international miami international bellingham international helena regional great falls international ixtapa zihuatanejo international calgary international john wayne fort lauderdale hollywood international newark liberty international yampa valley regional tri cities tucson international albuquerque international sunport john f kennedy international vancouver international juan santamaria international harry reid international airport lihue international missoula international walla walla regional milwaukee mitchell international mahlon sweet field king salmon cancun international redding municipal airport orlando international salt lake city international sky harbor international billings logan international gustavus adak cincinnati northern kentucky international jackson hole airport john glenn columbus international victoria international charleston international george bush intercontinental Unknown airport...
See code ```html Name glacier park international san francisco international gowen field lambert st louis international kelowna international yakima air terminal pullman moscow regional edmonton international tampa international minneapolis st paul international idaho falls regional airport rogue valley international palm springs international guanacaste airport oakland international logan international thurgood marshall international dallas love field santa barbara municipal kansas city international kona international licenciado gustavo diaz ordaz international wrangell deadhorse loreto international nome dwight d eisenhower national philadelphia international dallas fort worth international indianapolis international sacramento international rocky gutierrez unalaska merle mudhole smith james a johnson nashville international spokane international ketchikan international pittsburgh international san luis obispo regional hollywood burbank louis armstrong international paine field cincinnati northern kentucky international yakutat portland international ted stevens seattle tacoma international san diego international san antonio international fresno yosemite international austin bergstrom international ohare international guadalajara international san jose international juneau international roberts field charles m schulz fairbanks international raleigh durham international eppley airfield bozeman yellowstone international ontario international kahului international friedman memorial general rafael buelna international dillingham kodiak denver international manzanillo international los cabos international el paso international airport hartsfield jackson international los angeles international southwest florida international cleveland hopkins international airport ralph wien memorial philip sw goldson international airport pangborn memorial detroit metropolitan bethel ronald reagan national reno tahoe international wiley post will rogers monterey regional honolulu international will rogers world washington dulles international miami international bellingham international helena regional great falls international ixtapa zihuatanejo international calgary international john wayne fort lauderdale hollywood international newark liberty international yampa valley regional tri cities tucson international albuquerque international sunport john f kennedy international vancouver international juan santamaria international harry reid international airport lihue international missoula international walla walla regional milwaukee mitchell international mahlon sweet field king salmon cancun international redding municipal airport orlando international salt lake city international sky harbor international billings logan international gustavus adak cincinnati northern kentucky international jackson hole airport john glenn columbus international victoria international charleston international george bush intercontinental Unknown airport... ``` ### Example with checkmark for selected option
Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Name Apples Oranges Peaches Grapes Cherries No matching option ``` ### Using the type attribute The `type` attribute may be used to apply the corresponding `type` attribute on [auro-input](http://auro.alaskaair.com/components/auro/input/api). `type="credit-card"` is not currently supported.
Date 01/02/2020 05/16/2022
See code ```html Date 01/02/2020 05/16/2022 ``` ### Persistent menu option with a custom event This example demonstrates a static menu option that will always appears regardless of the suggestion filtering performed. In this example "Add new address" will always be a displayed menu option.
Address 555 Address Way Seattle, WA 99999 333 Some Street Seattle, WA 99999 Add new address
See code ```html Address 555 Address Way Seattle, WA 99999 333 Some Street Seattle, WA 99999 Add new address ``` ### Additional Use Case Examples #### Swapping Values Between Comboboxes This example illustrates using a JavaScript function attached to an auro-button component click event to swap the values of two `auro-combobox` elements. An example of this use case would be swapping the departure and arrival airports in a flight search form.
Name Apples Oranges Peaches Grapes Cherries No matching option Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html
Name Apples Oranges Peaches Grapes Cherries No matching option Name Apples Oranges Peaches Grapes Cherries No matching option
``` ## Recommended Use and Version Control There are two important parts of every Auro component. The class and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-combobox` custom element is defined automatically. To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroCombobox.register(name)` method and pass in a unique name. ```js import { AuroCombobox } from '../src/auro-combobox.js'; AuroCombobox.register('custom-combobox'); ``` This will create a new custom element that you can use in your HTML that will function identically to the `` element.
Name Apples Oranges Peaches Grapes Cherries No matching option
See code ```html Name Apples Oranges Peaches Grapes Cherries No matching option ```