Can we add a filterable prop to AutoComplete

[liuchao92]

Clear and concise description of the problem

e.g. User can type any text in a company input, and he can choose a existed company name from a company list.

So the company list need to be filtered when user inputed some text:

For now, I need to do something like this:

code snippet in template:

<n-form-item label="Company" path="company">
  <n-auto-complete
    v-model:value="data.company"
    :options="companyAutoCompleteOptions"
    placeholder="Company name"
    :get-show="() => true"
  />
</n-form-item>

code snippet in script:

const companyAutoCompleteOptions = computed(() => {
  const companies = [
    'TestA',
    'TestB',
    'TestC',
    'TestD',
    'TestE',
    'CompanyC'
  ]
  return companies.filter(c => c.includes(data.value.company)).map((suffix) => {
    return {
      label: suffix,
      value: suffix
    }
  })
})

Maybe we can add a filterable prop make it more easy to use.

Suggested solution

Add a filterable prop to AutoComplete, just like filterable in Select.

Alternative

No response

Additional context

AutoComplete component in other UI library:

• Vuetify Autocomplete
• TDesign filterable autocomplete

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.