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

Overview



v-suggest


v-suggest

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






Examples and Documentation

Live example on CodePen, more examples and documentation please visit below sites

Installation

npm i v-suggest -S

Include and install plugin in your main.js file

// Globally install plugin
import Vue from 'vue'
import Suggest from 'v-suggest'
Vue.use(Suggest)

// Import Suggest as a local component
import { Suggest } from 'v-suggest'
export default {
  components: {
    'v-suggest': Suggest
  }
}

Usage

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

<script>
export default {
  data () {
    return {
      myValue: '',
      example: [
        { id: 1, name: 'Chicago Bulls', desc: '芝加哥公牛' },
        { id: 2, name: 'Cleveland Cavaliers', desc: '克里夫兰骑士' },
        { ... }
      ]
    }
  }
}
</script>

Vue plugin series

Plugin Status Description
v-page npm version A simple pagination bar, including length Menu, i18n support
v-dialogs npm version A simple and powerful dialog, including Modal, Alert, Mask and Toast modes
v-tablegrid npm version A simpler to use and practical datatable
v-uploader npm version A Vue2 plugin to make files upload simple and easier,
you can drag files or select file in dialog to upload
v-ztree npm version A simple tree for Vue2, support single or multiple(check) select tree,
and support server side data
v-gallery npm version A Vue2 plugin make browsing images in gallery
v-region npm version A simple region selector, provide Chinese administrative division data
v-selectpage npm version A powerful selector for Vue2, list or table view of pagination,
use tags for multiple selection, i18n and server side resources supports
v-suggest npm version A Vue2 plugin for input suggestions by autocomplete
v-playback npm version A Vue2 plugin to make video play easier
v-selectmenu npm version A simple, easier and highly customized menu solution
Comments
  • how can I make dropdown to be open by just clicking in the input

    how can I make dropdown to be open by just clicking in the input

    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?

    opened by moustafaart4muslim 11
  • Emit

    Emit "Clear" event - when user clicks on "Clear" button

    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

    opened by tikvarova 3
  • It is possible to delay the transfer after pressing enter.

    It is possible to delay the transfer after pressing enter.

    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

    opened by DieterDeutsch 1
  • Invalid build for v-suggest.js

    Invalid build for v-suggest.js

    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

    bug 
    opened by shishtpal 1
  • When v-model has assigned value, suggestion dropdown wont show up.

    When v-model has assigned value, suggestion dropdown wont show up.

    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'}
            ],
    
    opened by jeyandale 1
  • Add a proper way to set element inside ">

    Add a proper way to set "error" class to element inside

    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

    opened by tikvarova 0
  • On local machine is run well but go to server is not working(don't show input control)

    On local machine is run well but go to server is not working(don't show input control)

    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 Annotation 2020-03-05 142258

    on server Annotation 2020-03-05 142320

    opened by Bornpagna 1
  • How to add class from css framework?

    How to add class from css framework?

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

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

    opened by rzwibowo 4
  • New data doesn't rerender when already focused. Bug with async data.

    New data doesn't rerender when already focused. Bug with async data.

    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()
        }
    }
    
    opened by JoshMoreno 0
Releases(v2.2.0)
  • v2.2.0(Dec 4, 2019)

    Changelog:

    • Added clear event, trigger by X icon click
    • Fixed when full-list set to true and click 'X' icon to clear input content, the full list is not shown
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Sep 10, 2019)

    Changelog:

    • Use render functions to completely refactored plugin
    • Add max-length prop, limit the number of suggestion results list
    • Add scoped slot supports, make customize suggestions more flexible
    • Use Javascript Standard Style to format code
    • Upgrade v-dropdown plugin to v2.1.1
    Source code(tar.gz)
    Source code(zip)
  • v1.1.3(Dec 23, 2018)

    Changelog:

    • Add placeholder prop, set the short hint is displayed when no content is entered
    • Add disabled prop, used to set disabled state of the plugin
    • The drop down container layer change to plugin v-dropdown
    • Add values event, used to respond suggestion list item select and output raw data
    • Fixed the plugin name incorrect in webpack.config.js
    Source code(tar.gz)
    Source code(zip)
A vue keyboard MultiSelect component.

vue-keyboard-multiselect A project for building a keyboard-supported MultiSelect component based on Vue.js. Build Setup # install dependencies npm i v

Ziwen Mei 212 Aug 11, 2022
SelectPage for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports

v-selectpage · A powerful selection plugin for Vue2, list or table view of pagination, use tags form for multiple selection, i18n and server side reso

Terry Zeng 235 Dec 22, 2022
Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

@desislavsd/vue-select Lightweight and mighty select component like Chosen and Select 2 done the Vue way. Demos & Docs License MIT License Copyright (

null 25 Sep 12, 2022
A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

JungJoo Seo 348 Dec 26, 2022
A multi-select component with nested options support for Vue.js

vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat

Fangzhou Li 2.6k Jan 1, 2023
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮

pd-select mobile wheel select demo browser version IE >11 Edg >=16 Firefox >=57 chrome >=47 safari >=11 iOS Safari >=9.3 Chrome for Android >=62 Samsu

YPanda 102 Sep 26, 2022
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 38 Nov 24, 2022
A native-like select field, but better

A native-like select field, but better

Maksym Nesterov 18 Jun 1, 2022
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.5k Jan 2, 2023
Simple input radio Vue.js component.

Simple input radio Vue.js component.

Odyzeo 0 Dec 22, 2021
A VueJS plugin that provides a searchable and reactive select list component with no dependencies.

vue-dynamic-select A VueJS plugin that provides a searchable and reactive select list component with no dependencies. View Online Demos Here Installat

Silas Montgomery 17 Sep 18, 2022
Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

?? _Fireselect_ Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Ch

Firework 51 Jul 23, 2020
Multiple select areas in one image (Plugin Vuejs)

Multi Select Areas Image Live Demos https://demo-multi-select-areas-image.herokuapp.com Installation With npm or yarn yarn add multi-select-areas-imag

Sun* Research 39 Nov 23, 2022
A better way to display select boxes when using `v-for` on objects.

vue-dropdowns A better way to handle v-for on objects. No special dependencies, no jquery, no bootstrap, just VueJS and CSS goodness. Demo Demo - http

Mike Rodham 95 Dec 30, 2022
Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

ENA 15 Nov 24, 2022
Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

Selecto.js Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch. Demo / API / Main Project ⚙️ Instal

Daybrush (Younkue Choi) 1.2k Jan 9, 2023
Select components using Bulma as CSS framework.

Vue Bulma Select Select components using Bulma as CSS framework Docs/Examples Could be found here TODO Push to NPM Unit testing Multi-select (tags) De

Gabriel Corado 13 Oct 19, 2022
stf vue select - most flexible and customized select

stf vue select VUE2 stf vue select - most flexible and customized select For detailed explanation on how things work, checkout the DEMO install # inst

Stfalcon LLC 62 Dec 22, 2021
Select with autocomplete, slots, bootstrap and material design themes.

The current version is 3.x, if you are looking for 2.x, you can find it here (also, see breaking changes). Flexible select Demo + Documentation Featur

Илья 239 Nov 18, 2022