I can't change the data list at run time

[adilorenzo10]

Hi everyone, I have a problem.
I need to change the autocomplete data based on a choice.
So I have list1 and list2. This works on the first choice, but if I try to change my choice I always see the previously selected list.

	jQuery(document).ready(function($){
    $("input[type=radio][name=sel-tipo-annuncio]").change(VisualizzaCategorieScelte);
  })

  function VisualizzaCategorieScelte(){
	var autoCompleteJS = new autoComplete();

    if (document.querySelector('input[name="sel-tipo-annuncio"]:checked').value == 'Bene'){
      passedArray = [];
      passedArray = passedArrayBene.slice();
    }
    else{
      passedArray = [];
      passedArray = passedArrayServizio.slice();	 
    }

	autoCompleteJS = new autoComplete({
            placeHolder: "Cerca una categoria...",
            data: {
                src: passedArray
            },
            resultItem: {
                highlight: false
            },
            events: {
                input: {
                    selection: (event) => {
                        const selection = event.detail.selection.value;
                        autoCompleteJS.input.value = selection;
                    }
                }
            }
        });
}

[folknor]

So you are creating a new autoComplete instance every time the radio selection changes? That's a bad idea. Do this instead:

	const autoCompleteJS = new autoComplete({
		placeHolder: "Cerca una categoria...",
		data: {
			src: function (query) {
				if (document.querySelector('input[name="sel-tipo-annuncio"]:checked').value == 'Bene') {
					return passedArrayBene.slice();
				}
				else {
					return passedArrayServizio.slice();
				}
			}
		},
		resultItem: {
			highlight: false
		},
		events: {
			input: {
				selection: (event) => {
					const selection = event.detail.selection.value;
					autoCompleteJS.input.value = selection;
				}
			}
		}
	});

[adilorenzo10]

Hi, I am very grateful to you for taking the time, your answer seems very clever but when I go to implement it I encounter the following error:

Uncaught (in promise) TypeError: i.src (...). Then is not a function
     at autoComplete.min.js: 1
     at new Promise (<anonymous>)
     at autoComplete.min.js: 1
     at new Promise (<anonymous>)
     at d (autoComplete.min.js: 1)
     at autoComplete.min.js: 1
     at new Promise (<anonymous>)
     at j (autoComplete.min.js: 1)
     at n (autoComplete.min.js: 1)
     at autoComplete.min.js: 1

The list does not open, could you help me?

[folknor]

Yes, that's a bug in autoComplete.js I forgot about. data.src must be an async function. If you see here in the docs it does not mention it: https://tarekraafat.github.io/autoComplete.js/#/configuration?id=data-required

So this should work:

	const autoCompleteJS = new autoComplete({
		placeHolder: "Cerca una categoria...",
		data: {
			src: async function (query) {
				if (document.querySelector('input[name="sel-tipo-annuncio"]:checked').value == 'Bene') {
					return passedArrayBene.slice();
				}
				else {
					return passedArrayServizio.slice();
				}
			}
		},
		resultItem: {
			highlight: false
		},
		events: {
			input: {
				selection: (event) => {
					const selection = event.detail.selection.value;
					autoCompleteJS.input.value = selection;
				}
			}
		}
	});

[ashinsaini]

also found that putting cache: false helped with the same errors.