terryz / v-suggest Goto Github PK

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

how to mutil select item？

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?

Space does not work when typing, it is automatically cut off.

Dear Terry,

What is the best way to set default value(selection) from a props?

10X 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

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

It would be nice if there was a placeholder option.

When selecting an item, shouldn't the row be returned / bound vs the selected text?

Please add Vue 3 support.
thank you

There is a bug on line https://github.com/TerryZ/v-suggest/blob/master/src/Suggest.vue#L168, I think you must check for undefined values...

支持根据输入的关键字动态获取吗？

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()
    }
}

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)

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

I just want to disabled it, until some function has been run but its not working.

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'}
        ],

It would be nice to see d.ts in all your component collection.

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