Vuetify: autocomplete feature

[lgullestrup]

What will it allow you to do that you can't do today?
Allow for a custom autocomplete feature with fluid form control and server-side processing options

How will it make current work-arounds straightforward?
The current autoselect is very select focused, and somewhat clumpy to use as an 'autocomplete' feature

What potential bugs and edge cases does it help to avoid?
un sure

i have forked and branched an autocomplete feature as mentioned in #835.

https://github.com/lgullestrup/vuetify/tree/feature/autocomplete

I have designed this component to be more fluid in forms, and flexible in use, allowing for both server-side processing and client-side processing. The component is only responsible for the display and selection of results, and selected value (filtering included if not using service-side).

The component is based on the existing v-select component, how ever, modified to incorporate true 'autocomplete' feature. I also had implement a custom 'v-menu' for the autocomplete to facilitate more fluid keyboard commands and interactions.

there a still a couple of small bugs i am working on, but i thought i would put this up anyway.
Current known bug is the duplication's of the strict value in the menu, cause but at line 79 of autocomplete.js
also yet to adjust the up and down arrow keys to allow for cycling of selections.

Also, i have not yet gone through and removed properties which arn't needed. apart from 'autocomplete', and 'multiple'

Added Properties:
strict: Boolean/String (default: false)
---If set, this property will enforce a selection from the menu. If a string is provided, the provided string will be added to the bottom of the menu. If no selection is made, then the field remains blank.
the last list item created with the strict value will contain a 'generatedItem' property set to 'true'
When set to true with a default item value, the first item in the menu will be highlighted when searching.

server-side: Boolean (default: false)
---If true, will display the array of items as provided (unless strict has a string value), relying on the server to provided a filtered list.

':search.sync'
This is required if you are running server side processing. it allows you to get the current searchValue.

Events
selected: this event is fired when a selection is made, and will provided the selected item. This is useful if your item contains more information for other fields

Keyboard Commands:
Typing will automatically activate the autocomplete functionality.
Tab will select any highlighted value.
If not value is highlisted and input is not strict, the searchvalue will be set as the inputvalue.
If strict and there is no Default strict eg.'Unknown', then no value will be set.

example use:

<v-autocomplete :items="list" 
    v-model="fieldValue" 
    :search.sync="search"
     label="Suburb" item-text="suburb" 
    item-value="suburb" 
    @selected="handleSelected"
     strict="Unknown">
<template slot="item" scope="data">
      <v-list-tile-content>
        <v-list-tile-title>{{data.item.suburb}}</v-list-tile-title>
        <template v-if="!data.item.generatedItem">
          <v-list-tile-sub-title>{{data.item.postcode}} - {{data.item.state}}</v-list-tile-sub-title>
        </template>
      </v-list-tile-content>
    </template>
</v-autocomplete

[johnleider]

Next release will show some additions/improvements to the autocomplete functionality. It is currently already in, just not documented. After next release, we can take a look at improvement areas.

[namlook]

Hi, any news on this feature ? Emiting the searchValue value from autocomplete mixin would be a first start so we can update the items by ourself...

[johnleider]

It's on the list, it will be done, just lower on triage.

[namlook]

Thanks, much appreciated

[johnleider]

This has been implemented with the exception of the tagging like system, and the duplication handling of that will be resolved with #1413

[gabrielmirandat]

It would be interesting to the autocomplete be invariant to accents, as some languages has accents. One example is if I search for "Camara" suggest itens like "Câmara", "CAMARA", "CÂMARA"..

[gabrielmirandat]

I see you introduced a new props filter for the v-select. Is there any example on how to use as custom filter for autocomplete? I did :filter="filterFunction" and declared this method but did not work

[johnleider]

No but we are going to add one. Select is still being heavily iterated on as it is the core functionality for a boatload of things. For help based questions, you can head to https://chat.vuetifyjs.com

[jaesung2061]

Can you add an option to ignore case?

[jacekkarczmarczyk]

@jaesung2061 this issue is closed, please create a new one for ignoring case

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord