A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element

Hi,

I want to make the dropdown to be open by just clicking inside the input, before typing text.. I mean to be open viewing all the items in the list

How to achieve this?

Dear Terry,

Could you please emit this event! It will be very useful to catch it and do some additional work in a complex component For example if we have some list of items in a table/ul/ol and we want to dynamically clear list of items if we clear our v-suggest component!

Thanks in advance

Super module, it is possible to delay the transfer after pressing enter. At the moment my form is sent immediately and the data is not included. Wait a few seconds then the data is there. Thanks for the great script. Didi

Hi

Standalone build for v-suggest is invalid because it shows vSelectPage

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("vSelectPage",[],e):
....

Please Update it!

Thanks

any suggestions please, thanks.

see sample code below,

     <v-suggest :data="example"
        show-field="text"
        v-model="myValue" ></v-suggest>

      myValue: "Chicago Bulls",
        example: [
            {value: "1" ,text:'Chicago Bulls'},
            {value: "2" ,text:'Cleveland Cavaliers'}
        ],

Dear Terry,

Could you please provide a simple way to "Add/Remove" class "error" and "valid" (maybe via props) to a nested tag.

This will be very helpful if we use VUELIDATE for example to dynamically set remove visual representation of errors (missed selection for example) to a end user.

Thanks in advance

V-Suggest :on Local Machine It working well but i'm host it to server it not working it don't show control input but no error detect and required still work on Local Machine

on server

Result: input field doubled, in the back is styled input, and in the front is v-suggest styled input

Expected: input field styled according to class applied from css framework (eg.: bootstrap with .form-control)

I'm populating the passing a list of suggestions to the data prop which get set in an async function.

Basically, I have a component that watches search, hits the api, and sets the suggestions which get passed to your component. But your component doesn't update list in your component until you re-trigger a focus event.

Component that uses v-suggest

<template>
    <v-suggest
            v-model="search"
            :data="this.suggestions"
    ></v-suggest>
</template>

<script>
    import { Suggest } from 'v-suggest'
    import axios from 'axios'

    export default {
        components: {
            'v-suggest': CustomVSuggest
        },
        data() {
            return {
                search: '',
                suggestions: [],
            }
        },
        methods: {
            getSuggestions: function() {
                return axios.get('/api/search/' + this.search)
                        .then(response => {
                            this.suggestions = response.data
                        })
            },
        },
        watch: {
            search: function(newValue, oldValue) {
                this.getSuggestions()
            }
        }
    }
</script>

The workaround I'm using right now is creating a component that extends yours and just calls this.focus() whenever data changes. And then of course using this in place of the v-suggest component.

Workaround component

<script>
    import { Suggest } from 'v-suggest'

    export default {
        extends: Suggest,
        watch: {
            data(newValue, oldValue) {
                this.focus()
            }
        }
    }
</script>

I think you can probably just add this to your methods.js

watch: {
    data(newValue, oldValue) {
        this.focus()
    }
}