Object items
List items can be not only strings but also objects.
- ObjectItems.tsx
- data/states-obj.ts
import { useState } from 'react';
import { useCombobox, autocomplete } from '@szhsin/react-autocomplete';
import STATES from '../../data/states-obj';
const ObjectItems = () => {
const [value, setValue] = useState<string>();
const [selected, setSelected] = useState<{ name: string; abbr: string }>();
const items = value
? STATES.filter((item) => item.name.toLowerCase().startsWith(value.toLowerCase()))
: STATES;
const {
getFocusCaptureProps,
getLabelProps,
getInputProps,
getClearProps,
getToggleProps,
getListProps,
getItemProps,
isItemSelected,
open,
focusIndex,
isInputEmpty
} = useCombobox({
items,
// When items are objects, you must specify how to retrieve the text value from the item.
getItemValue: (item) => item.name,
// If item references change on each render, you should define how items are equal.
// By default, it compares object references if `isEqual` is not provided.
isEqual: (item1, item2) => item1?.abbr === item2?.abbr,
value,
onChange: setValue,
selected,
onSelectChange: setSelected,
feature: autocomplete({ select: true })
});
return (
<div>
<label {...getLabelProps()} {...getFocusCaptureProps()}>
State
</label>
<div>
<input placeholder="Select or type..." {...getInputProps()} />
{!isInputEmpty && <button {...getClearProps()}>X</button>}
<button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
</div>
<ul
{...getListProps()}
style={{
display: open ? 'block' : 'none',
position: 'absolute',
listStyle: 'none',
color: '#000',
background: '#fff',
overflow: 'auto',
maxHeight: 300,
margin: 0,
padding: 0
}}
>
{items.length ? (
items.map((item, index) => (
<li
style={{
background: focusIndex === index ? '#ddd' : 'none',
// Use `isItemSelected` to check if an item has been selected
textDecoration: isItemSelected(item) ? 'underline' : 'none'
}}
key={item.abbr}
{...getItemProps({ item, index })}
>
{item.name}
</li>
))
) : (
<li>No options</li>
)}
</ul>
</div>
);
};
export default ObjectItems;
// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States
export default [
{
name: 'Alabama',
abbr: 'AL'
},
{
name: 'Alaska',
abbr: 'AK'
},
{
name: 'Arizona',
abbr: 'AZ'
},
{
name: 'Arkansas',
abbr: 'AR'
},
{
name: 'California',
abbr: 'CA'
},
{
name: 'Colorado',
abbr: 'CO'
},
{
name: 'Connecticut',
abbr: 'CT'
},
{
name: 'Delaware',
abbr: 'DE'
},
{
name: 'Florida',
abbr: 'FL'
},
{
name: 'Georgia',
abbr: 'GA'
},
{
name: 'Hawaii',
abbr: 'HI'
},
{
name: 'Idaho',
abbr: 'ID'
},
{
name: 'Illinois',
abbr: 'IL'
},
{
name: 'Indiana',
abbr: 'IN'
},
{
name: 'Iowa',
abbr: 'IA'
},
{
name: 'Kansas',
abbr: 'KS'
},
{
name: 'Kentucky',
abbr: 'KY'
},
{
name: 'Louisiana',
abbr: 'LA'
},
{
name: 'Maine',
abbr: 'ME'
},
{
name: 'Maryland',
abbr: 'MD'
},
{
name: 'Massachusetts',
abbr: 'MA'
},
{
name: 'Michigan',
abbr: 'MI'
},
{
name: 'Minnesota',
abbr: 'MN'
},
{
name: 'Mississippi',
abbr: 'MS'
},
{
name: 'Missouri',
abbr: 'MO'
},
{
name: 'Montana',
abbr: 'MT'
},
{
name: 'Nebraska',
abbr: 'NE'
},
{
name: 'Nevada',
abbr: 'NV'
},
{
name: 'New Hampshire',
abbr: 'NH'
},
{
name: 'New Jersey',
abbr: 'NJ'
},
{
name: 'New Mexico',
abbr: 'NM'
},
{
name: 'New York',
abbr: 'NY'
},
{
name: 'North Carolina',
abbr: 'NC'
},
{
name: 'North Dakota',
abbr: 'ND'
},
{
name: 'Ohio',
abbr: 'OH'
},
{
name: 'Oklahoma',
abbr: 'OK'
},
{
name: 'Oregon',
abbr: 'OR'
},
{
name: 'Pennsylvania',
abbr: 'PA'
},
{
name: 'Rhode Island',
abbr: 'RI'
},
{
name: 'South Carolina',
abbr: 'SC'
},
{
name: 'South Dakota',
abbr: 'SD'
},
{
name: 'Tennessee',
abbr: 'TN'
},
{
name: 'Texas',
abbr: 'TX'
},
{
name: 'Utah',
abbr: 'UT'
},
{
name: 'Vermont',
abbr: 'VT'
},
{
name: 'Virginia',
abbr: 'VA'
},
{
name: 'Washington',
abbr: 'WA'
},
{
name: 'West Virginia',
abbr: 'WV'
},
{
name: 'Wisconsin',
abbr: 'WI'
},
{
name: 'Wyoming',
abbr: 'WY'
}
];