autocomplete feature

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

[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”…

[johnleider]

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