autocomplete.preloaderHide() is not defined

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) {
      .then(({ data }) => {
        //console.log('success-autocmplete', data);
      .finally(() => {
  }, []);

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.

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.

source(query, render) {
  const autocomplete = this;
  .then(data => render(data))
  .finally(() => autocomplete.preloaderHide())
1 Like