I’m building an autocomplete in react js & axios, very hard to do it. @nolimits4web could you review my code pls? what’s wrong with it? thanks
useEffect(() => {
autocompleteDropdownAjax.current = f7.autocomplete.create({
inputEl: '#autocomplete-dropdown',
openIn: 'dropdown',
expandInput: true, // expand input
preloader: true, // enable preloader
valueProperty: 'long_name', // object's "value" property long_name
textProperty: 'long_name', // object's "text" property long_name
dropdownPlaceholderText: 'Inserisci lindirizzo completo',
source(query, render) {
addressSearch(query)
.then(({ data }) => {
autocomplete.preloaderShow()
//console.log('success-autocmplete', data);
render(data);
})
.finally(() => {
autocomplete.preloaderHide()
})
}
});
}, []);
kerrydp
September 28, 2022, 12:45am
2
You are calling autocomplete.preloaderShow() but you haven’t declared autocomplete in the code you’re showing us.
In other words, using an object before declaring it.
You need to call var autocomplete or let autocomplete first.
Visit Autocomplete | Framework7 Documentation and scroll down to ‘Dropdown with ajax data’
but i declared autocomplete like this:const autocompleteDropdownAjax = useRef(null);
You declared autocompleteDropDownAjax. But you need to also declare a variable named autocomplete, because you are using it in your code without declaring it.
Take a closer look at the link I posted to the docs, try searching for the line ‘var autocomplete = this;’ to see the code you need to use.
kerrydp:
autocomplete
i copied code from here: framework7/autocomplete.jsx at master · framework7io/framework7 · GitHub
pls can u help me declaring the right var? cannot understand what’s missing. thanks.
deejay
October 3, 2022, 7:33pm
6
source(query, render) {
const autocomplete = this;
autocomplete.preloaderShow();
addressSearch(query)
.then(data => render(data))
.finally(() => autocomplete.preloaderHide())
}
autocompleteDropdownAjax.current = f7.autocomplete.create({
inputEl: '#autocomplete-dropdown-ajax',
openIn: 'dropdown',
preloader: true, // enable preloader
/* If we set valueProperty to "id" then input value on select will be set according to this property */
valueProperty: 'name', // object's "value" property name
textProperty: 'name', // object's "text" property name
limit: 20, // limit to 20 results
dropdownPlaceholderText: 'Try "JavaScript"',
source(query, render) {
const autocomplete = this;
const results = [];
if (query.length === 0) {
render(results);
return;
}
// Show Preloader
autocomplete.preloaderShow();
// Do Ajax request to Autocomplete data
f7.request({
1 Like
