Socket
Socket
Sign inDemoInstall

vue-suggestion

Package Overview
Dependencies
20
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-suggestion

Suggestion list input with Vue


Version published
Maintainers
1
Install size
4.93 MB
Created

Readme

Source

vue-suggestion-logo

vue-suggestion

Suggestion list input for Vue

npm stars

In-action GIF

Documentation and Demo

Visit the website

Changelog

Go to Github Releases

Getting started

  • Install the plugin:

    npm install vue-suggestion
    
  • Add the plugin into your app:

    import Vue from 'vue';
    import VueSuggestion from 'vue-suggestion';
    
    Vue.use(VueSuggestion);
    

    More info on installation

  • Use the vue-suggestion component:

    <template>
      <vue-suggestion
        :items="items"
        v-model="item"
        :setLabel="setLabel"
        :itemTemplate="itemTemplate"
        @changed="inputChange"
        @selected="itemSelected"
      >
      </vue-suggestion>
    </template>
    
    <script>
      import itemTemplate from './item-template.vue';
      export default {
        data() {
          return {
            item: {},
            items: [
              { id: 1, name: 'Golden Retriever' },
              { id: 2, name: 'Cat' },
              { id: 3, name: 'Squirrel' },
            ],
            itemTemplate,
          };
        },
        methods: {
          itemSelected(item) {
            this.item = item;
          },
          setLabel(item) {
            return item.name;
          },
          inputChange(text) {
            // your search method
            this.items = this.items.filter((item) => item.name.indexOf(text) > -1);
            // now `items` will be showed in the suggestion list
          },
        },
      };
    </script>
    

    ItemTemplate example:

    <template>
      <div>
        <b>#{{ item.id }}</b>
        <span>{{ item.name }}</span>
      </div>
    </template>
    
    <script>
      export default {
        props: {
          item: { required: true },
        },
      };
    </script>
    

Installation

npm

  npm install vue-suggestion

Install the plugin into Vue:

import Vue from 'vue';
import VueSuggestion from 'vue-suggestion';

Vue.use(VueSuggestion, [(globalOptions = {})]); // Define default global options here (optional)

View all available options in Props.

Or use the component directly:

<!-- your-component.vue-->
<template>
  <vue-suggestion v-model="value"></vue-suggestion>
</template>

<!-- some-sample-css-as-example-for-your-dropdown-autocomplete  -->
<style scope>
  .vue-suggestion .vs__list {
    width: 100%;
    text-align: left;
    border: none;
    border-top: none;
    max-height: 400px;
    overflow-y: auto;
    border-bottom: 1px solid #023d7b;
    position: relative;
  }
  .vue-suggestion .vs__list .vs__list-item {
    background-color: #fff;
    padding: 10px;
    border-left: 1px solid #023d7b;
    border-right: 1px solid #023d7b;
  }
  .vue-suggestion .vs__list .vs__list-item:last-child {
    border-bottom: none;
  }
  .vue-suggestion .vs__list .vs__list-item:hover {
    background-color: #eee !important;
  }
  .vue-suggestion .vs__list,
  .vue-suggestion .vs__loading {
    position: absolute;
  }
  .vue-suggestion .vs__list .vs__list-item {
    cursor: pointer;
  }
  .vue-suggestion .vs__list .vs__list-item.vs__item-active {
    background-color: #f3f6fa;
  }
</style>

<script>
  import { VueSuggestion } from 'vue-suggestion';

  export default {
    components: {
      VueSuggestion,
    },
  };
</script>

Browser

Include vue-suggestion in the page.

<script src="https://unpkg.com/vue-suggestion"></script>

If Vue is detected in the Page, the plugin is installed automatically.

Manually install the plugin into Vue:

Vue.use(VueSuggestion);

Or use the component directly:

Vue.component('vue-suggestion', VueSuggestion.VueSuggestion);

License

Copyright (c) 2018 Steven Dao. Released under the MIT License.

made with ❤ by Steven.

Keywords

FAQs

Last updated on 21 Dec 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc