Autocomplete doesn't work properly

[cix99]

Describe the bug

<template>
  <div id="app">
    <auto-complete
      v-model="country"
      :suggestions="['Italy', 'Spain', 'France']"
      @complete="searchCountry"
      placeholder="Nation"
    /></auto-complete>
  </div>
</template>

This version of code works fine, with hard-coded countries in an array passed directly to :suggestions

But if I pass the name of the variable containing the same array it doesn't work anymore.

<template>
  <div id="app">
    <auto-complete
      v-model="country"
      :suggestions="countries"
      @complete="searchCountry"
      placeholder="Nation"
    /></auto-complete>
  </div>
</template>

This is the script

<script>
import "primevue/resources/themes/saga-blue/theme.css";
import "primevue/resources/primevue.min.css";
import AutoСomplete from "primevue/autocomplete";
import { ref, reactive } from "vue";

export default {
  name: "App",
  components: {
    "auto-complete": AutoСomplete,
  },
  setup() {

    const countries = ref(['Italy', 'Spain', 'France'])

    const country = ref(null);
    const suggestions = ref([]);

    function searchCountry() {
      //Nothing
    }

    return {
      country,
      countries,
      searchCountry,
    };
  },
};
</script>

Reproducer

https://codesandbox.io/s/q7svkf

PrimeVue version

3.47.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[mertsincan]

Hi, Thanks a lot for your report! But, unfortunately, the sample is not working. Could you please update it? Thanks a lot!

[JoseGarcia3443]

same issue my solution was use Dropdown instead autocomplete using the "filter" action emitted by the Dropdown

    const [{ search, filterFields }, dropdownHandlers] = useDropdownFilter({
      debounceMs: 250,
      filterFields: ['part_number', 'id', 'name'],
      handlers: {
        onSearch: (event) => {
          materialsFilters.value.where.param = event.value
        },
        onChange: (event) => {
          if (!event.value?.id) {
            alert('id not provided')
            return
          }
          articleId.value = event.value.id
        },
      },
    })

        <Dropdown
          v-model="search"
          :options="articles"
          filter
          :disabled="isDetailsFetching || isFetching"
          :loading="isArticlesLoading"
          :filterFields="filterFields"
          :placeholder="t('columns.ARTICLE')"
          :class="['w-full', { 'p-invalid': Boolean(errors.article_id) }]"
          @filter="dropdownHandlers.onSearch"
          @change="dropdownHandlers.onChange"
        >

note: the useDropdownFilter was created by me

[ohmmolina]

@cix99 As long as I can understand (because the sample is not working), the autocomplete component does not function as you think it does. The complete callback MUST change the suggestions array, otherwise it would not function. Also I tried to use an array directly into :suggestions but it never worked, which I supposed it's ok, because it is not a ref.

The Docs specifies tha v-model, suggestions and complete are required, but doesn't say how the callback should function.

Here is an example

<script setup>
import { ref } from 'vue'

const countries = ref(['Italy', 'Spain', 'France'])
const filteredCountries = ref([])

const country = ref(null)

function searchCountry(e) {
  filteredCountries.value = countries.value.filter((country) => {
    return country.toLowerCase().startsWith(e.query.toLowerCase())
  })
}
</script>

<template>
  <main>
    <auto-complete
      v-model="country"
      :suggestions="countries"
      @complete="searchCountry"
      placeholder="Nation"
    />
  </main>
</template>