I extracted part of the autocomplete example from React kitchen sink. I only changed the data to not be an array of string but to be an array of objects with properties id and text.
When I search for Banana it shows the result of banana, but when I click on it it show the ‘id’ of 3 in the autocomplete input. It is supposed to show the ‘text’ of the slected object.
const FormAutocomplete: React.FC<IFormAutocomplete> = ({ attrs, error, value, onBlur, onChange }) => {
const $ = f7.$;
useEffect(() => {
const fruits = [
{
id: '0',
text: 'Apple'
},
{
id: '1',
text: 'Apricot'
},
{
id: '2',
text: 'Avocado'
},
{
id: '3',
text: 'Banana'
},
{
id: '4',
text: 'Melon'
},
{
id: '5',
text: 'Orange'
},
{
id: '6',
text: 'Peach'
},
{
id: '7',
text: 'Pear'
},
{
id: '8',
text: 'Pineapple'
}
];
// const v = fruits.find(f => f.value == value)?.text
// $('#autocomplete-dropdown').val(v);
const autoComplete = f7.autocomplete.create({
inputEl: '#autocomplete-dropdown',
openIn: 'dropdown',
source(query, render) {
const results: any[] = [];
if (query.length === 0) {
render(results);
return;
}
// Find matched items
for (let i = 0; i < fruits.length; i += 1) {
if (fruits[i].text.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
}
// Render items by passing array with result items
render(results);
},
});
autoComplete.on('change', (values: any[]) => console.log(values))
return () => autoComplete.destroy();
}, []);
return (
<ListInput
label="Fruit"
inlineLabel
type="text"
placeholder="Fruit"
inputId="autocomplete-dropdown"
/>
);
}