How to bind the input search of v-autocomplete with the vuetify 3 beta ?

[freesoul]

I tried different ways, I tried to read the code of the library as well, but I can not make it work.
The example here for the api search is not working
https://next.vuetifyjs.com/en/components/autocompletes/#api-search

[bricox]

Anyone have any suggestions for this? I can't get this to work either.

[AndrianBalanescu]

Basically you can try creating your own input template and append it and binding with v-model for the same 'search'

  <v-autocomplete solo full-width label="Select a Color" dense :items="colorCollectionPallete" 
            :value="colorName"
            :search-input.sync="search"
            @input="inputChange($event)" >
              <template #no-data>
                <p class="pt-12" style="color: gray">No results found</p>
              </template>


    
              <!-- // * SEARCH INPUT -->
              <template v-slot:prepend-item>
             <div>
              <v-text-field 
              v-model="search" label="Search" 
            />
             </div>
                <v-divider class="mt-2"></v-divider>
              </template>
              
            </v-autocomplete>

data() { return { search: null, };

        **_:search-input.sync="search"_**

[cverster]

Is there a way to do this by using the actual autocomplete text as your search input, instead of having a second "search" input when you open the autocomplete?

[superipey]

Try this code:

<script setup>
const search = ref()

const onInput = val => {
  if (!val) return false

  // Do Fetching Data Here
  // val is search value
} 
</script>

<v-autocomplete
  v-model:search-input="search"
  :items="listData"
  :loading="loading"
  @update:search="onInput"
  no-filter
/>

[KaelWD]

It's just v-model:search="search"

[BilalShah3]

v-model search behaves not correctly when i focus or outfocus the autocomplete it sends the request to backend also when i select the item from list suppose i search with id and list have names so when i select the item search value equal to name and again send the request to backend

[mdcarreira]

Were you able to get around this? I'm also having this problem, the backend search get triggered when it's not supposed to. I tried with both v-model:search="search" and @update:search="onInput", but both seem to get triggered when I don't intend to...

[mdcarreira]

E.g.: with @update:search="onInput" the event will get triggered with empty value when un-focusing and will emit the already select value when focusing.

[zarusso]

I solved it by getting the v-autocomplete ref and performing the query only if the v-autocomplete is focused

[abdojulari]

Can you share your code

[aneesshameed]

You need to use another v-model to know the selected value

{{ data }} <!-- This prints the selected item here -->
<v-autocomplete 
   v-model="data"
   v-model:search="search"
   :items="list" 
   :loading="loading"
   @update:search="queryFromServer" 
   no-filter />