A vue.js component to provide a box with a list of items with search and pagination.

Overview

v-select-box

npm npm

Demo

There is an example showcasing the component here.

Description

A vue.js component to provide a box with a list of items with search and pagination, without the overhead of jquery.

Features

  • Search
  • Infinite Scroll
  • Single/Multi Select
  • Minimal Size

Installation

npm install v-select-box

Basic Usage

">
<template>
  <div id="app">
    <v-select-box v-model="selected" :options="options">v-select-box>
  div>
template>

<script>
  import VSelectBox from 'v-select-box'
  export default {
    name: 'app',
    components: {
      VSelectBox
    },
    data () {
      return {
        selected: {},
        options: {
          load: (params) => {
            //Request code goes here
            //Should return a Promise, resolving the result object
            const mock = {
              page: 1,
              pageCount: 1,
              pageSize: 10,
              items: [
                { id: 1, text: 'test1' },
                { id: 2, text: 'test2' }
              ]
            }

            return Promise(mock)
          }
        }
      }
    }
  }
script>

Options

The only property required for the v-select-box to work is the load function. All the other ones are optional.

Name Type Default Description
multi boolean false Whether or not it allows selection of multiple items.
debug boolean false Debug flag that enables console messages.
page number 1 Used to detemine which is the next page to request.
pageCount number 1 Used to detemine if the current page is the last.
pageSize number 10 How many items each page will have.
minimumInput number 0 The minimum number of characters the search query should have.
placeholder string '' The placeholder displayed.
locale string 'enUS' The language displayed.
items array [] The items that should be displayed.
onSelect function undefined Called after the user clicks an item.
load function undefined Called to request items to display in the list.
params object {} Optional object with the names of params sent in the requests.

Params

Name Type Default Description
search string q The name of the param to send the search query in the requests.
size string pageSize The name of the param to send the size of the page in the requests.

Methods

onSelect()

The onSelect() method is called after the user clicks an item and receives an object containing the item.

Syntax

onSelect(item)

Parameters
  • item the object representing the list item. It has three properties:
    • id an unique identifier
    • text the text visible on the item itself
    • selected a boolean value indicating if the item is selected or not
Return Value

The onSelect() method doesn't have to return anything.


load()

The load() method is called when the component needs to populate the list with items. When it is called, the parameter is an object with the search term that was typed in the search box and the page size and the number of the page that needs to be requested. The load() method needs to return a Promise. The promise needs to be resolved with an object with the following structure:

  • page the current page
  • pageCount the total of pages
  • pageSize how many items each page has
  • items an array containing the items that should be displayed
    • id an unique identifier
    • text the text visible on the item itself
Syntax

load({ [search], [size], page })

Parameters
  • search the actual name of the property depends on the params.search, that could've been passed to the component via the options object. If a params.search is not set, the default name for this parameter is q.
  • size the actual name of the property depends on the params.size, that could've been passed to the component via the options object. If a params.size is not set, the default name for this parameter is pageSize.
  • page the number of the page that the component is requesting. The next page.
Return Value

For the reasons expressed above, the load() method has to return a Promise.

New Features

There is a list of features that are currently being worked on. They will be pushed to this repository as soon as they're finished.

Your feedback is appreciated!

You might also like...
Autocomplete Component for Vue.Js
Autocomplete Component for Vue.Js

vue-autocomplete Autocomplete Component for Vue.Js Intro Vue Autocomplete is a Vue.Js component to make some suggestions for user input. come with .vu

A configurable & lightweight Vue wrapper component that enables
A configurable & lightweight Vue wrapper component that enables

A configurable & lightweight Vue wrapper component that enables "out of the box" email autocomplete/suggestions on input elements.

Mention component for Vue.js
Mention component for Vue.js

vue-mention Mention popper for input and textarea Documentation Sponsors Quick start script import { Mentionable } from 'vue-mention' const users =

Vue 2 Component to make Autocomplete element.
Vue 2 Component to make Autocomplete element.

Vue 2 Autocomplete Autocomplete component for Vue 2. This is a fork of vue2-autocomplete - Naufal Rabbani [email protected] Install You can imp

 🔍 Autosuggest component built for Vue
🔍 Autosuggest component built for Vue

vue-autosuggest 🔍 Autosuggest component built for Vue. Table of Contents Examples Features Installation Usage Props Inspiration Contributors LICENSE

vue autoComplete component

vueto-complete vue autoComplete component Index Features Installation Examples Props Slots Events Styling LICENSE Features Supports full control over

A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.
A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.

v-autosuggest A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying. Table of contents Installation Usage Pr

A simple tag component with typeahead
A simple tag component with typeahead

v-tag-suggestion A simple tag component with typeahead ⌨️ Install via npm npm install vue-tag-suggestion Import and register where you want to use imp

Google Autocomplete Vue Componet
Google Autocomplete Vue Componet

Google Autocomplete I am sharing this component because I was overwhelmed by complicated examples to achieve this simple job. So, I will try to be as

Comments
  • Bump eslint from 4.11.0 to 4.18.2

    Bump eslint from 4.11.0 to 4.18.2

    Bumps eslint from 4.11.0 to 4.18.2.

    Release notes

    Sourced from eslint's releases.

    v4.18.2

    • 6b71fd0 Fix: [email protected], because 4.0.3 needs "ajv": "^6.0.1" (#10022) (Mathieu Seiler)
    • 3c697de Chore: fix incorrect comment about linter.verify return value (#10030) (Teddy Katz)
    • 9df8653 Chore: refactor parser-loading out of linter.verify (#10028) (Teddy Katz)
    • f6901d0 Fix: remove catastrophic backtracking vulnerability (fixes #10002) (#10019) (Jamie Davis)
    • e4f52ce Chore: Simplify dataflow in linter.verify (#10020) (Teddy Katz)
    • 33177cd Chore: make library files non-executable (#10021) (Teddy Katz)
    • 558ccba Chore: refactor directive comment processing (#10007) (Teddy Katz)
    • 18e15d9 Chore: avoid useless catch clauses that just rethrow errors (#10010) (Teddy Katz)
    • a1c3759 Chore: refactor populating configs with defaults in linter (#10006) (Teddy Katz)
    • aea07dc Fix: Make max-len ignoreStrings ignore JSXText (fixes #9954) (#9985) (Rachael Sim)

    v4.18.1

    • f417506 Fix: ensure no-await-in-loop reports the correct node (fixes #9992) (#9993) (Teddy Katz)
    • 3e99363 Docs: Fixed typo in key-spacing rule doc (#9987) (Jaid)
    • 7c2cd70 Docs: deprecate experimentalObjectRestSpread (#9986) (Toru Nagashima)

    v4.18.0

    • 70f22f3 Chore: Apply memoization to config creation within glob utils (#9944) (Kenton Jacobsen)
    • 0e4ae22 Update: fix indent bug with binary operators/ignoredNodes (fixes #9882) (#9951) (Teddy Katz)
    • 47ac478 Update: add named imports and exports for object-curly-newline (#9876) (Nicholas Chua)
    • e8efdd0 Fix: support Rest/Spread Properties (fixes #9885) (#9943) (Toru Nagashima)
    • f012b8c Fix: support Async iteration (fixes #9891) (#9957) (Toru Nagashima)
    • 74fa253 Docs: Clarify no-mixed-operators options (fixes #9962) (#9964) (Ivan Hayes)
    • 426868f Docs: clean up key-spacing docs (fixes #9900) (#9963) (Abid Uzair)
    • 4a6f22e Update: support eslint-disable-* block comments (fixes #8781) (#9745) (Erin)
    • 777283b Docs: Propose fix typo for function (#9965) (John Eismeier)
    • bf3d494 Docs: Fix typo in max-len ignorePattern example. (#9956) (Tim Martin)
    • d64fbb4 Docs: fix typo in prefer-destructuring.md example (#9930) (Vse Mozhet Byt)
    • f8d343f Chore: Fix default issue template (#9946) (Kai Cataldo)

    v4.17.0

    • 1da1ada Update: Add "multiline" type to padding-line-between-statements (#8668) (Matthew Bennett)
    • bb213dc Chore: Use messageIds in some of the core rules (#9648) (Jed Fox)
    • 1aa1970 Docs: remove outdated rule naming convention (#9925) (Teddy Katz)
    • 3afaff6 Docs: Add prefer-destructuring variable reassignment example (#9873) (LePirlouit)
    • d20f6b4 Fix: Typo in error message when running npm (#9866) (Maciej Kasprzyk)
    • 51ec6a7 Docs: Use GitHub Multiple PR/Issue templates (#9911) (Kai Cataldo)
    • dc80487 Update: space-unary-ops uses astUtils.canTokensBeAdjacent (fixes #9907) (#9906) (Kevin Partington)
    • 084351b Docs: Fix the messageId example (fixes #9889) (#9892) (Jed Fox)
    • 9cbb487 Docs: Mention the globals key in the no-undef docs (#9867) (Dan Dascalescu)

    v4.16.0

    • e26a25f Update: allow continue instead of if wrap in guard-for-in (fixes #7567) (#9796) (Michael Ficarra)
    • af043eb Update: Add NewExpression support to comma-style (#9591) (Frazer McLean)
    • 4f898c7 Build: Fix JSDoc syntax errors (#9813) (Matija Marohnić)
    • 13bcf3c Fix: Removing curly quotes in no-eq-null report message (#9852) (Kevin Partington)
    • b96fb31 Docs: configuration hierarchy for CLIEngine options (fixes #9526) (#9855) (PiIsFour)
    • 8ccbdda Docs: Clarify that -c configs merge with .eslintrc.* (fixes #9535) (#9847) (Kevin Partington)
    • 978574f Docs: Fix examples for no-useless-escape (#9853) (Toru Kobayashi)
    ... (truncated)
    Changelog

    Sourced from eslint's changelog.

    v4.18.2 - March 2, 2018

    • 6b71fd0 Fix: [email protected], because 4.0.3 needs "ajv": "^6.0.1" (#10022) (Mathieu Seiler)
    • 3c697de Chore: fix incorrect comment about linter.verify return value (#10030) (Teddy Katz)
    • 9df8653 Chore: refactor parser-loading out of linter.verify (#10028) (Teddy Katz)
    • f6901d0 Fix: remove catastrophic backtracking vulnerability (fixes #10002) (#10019) (Jamie Davis)
    • e4f52ce Chore: Simplify dataflow in linter.verify (#10020) (Teddy Katz)
    • 33177cd Chore: make library files non-executable (#10021) (Teddy Katz)
    • 558ccba Chore: refactor directive comment processing (#10007) (Teddy Katz)
    • 18e15d9 Chore: avoid useless catch clauses that just rethrow errors (#10010) (Teddy Katz)
    • a1c3759 Chore: refactor populating configs with defaults in linter (#10006) (Teddy Katz)
    • aea07dc Fix: Make max-len ignoreStrings ignore JSXText (fixes #9954) (#9985) (Rachael Sim)

    v4.18.1 - February 20, 2018

    • f417506 Fix: ensure no-await-in-loop reports the correct node (fixes #9992) (#9993) (Teddy Katz)
    • 3e99363 Docs: Fixed typo in key-spacing rule doc (#9987) (Jaid)
    • 7c2cd70 Docs: deprecate experimentalObjectRestSpread (#9986) (Toru Nagashima)

    v4.18.0 - February 16, 2018

    • 70f22f3 Chore: Apply memoization to config creation within glob utils (#9944) (Kenton Jacobsen)
    • 0e4ae22 Update: fix indent bug with binary operators/ignoredNodes (fixes #9882) (#9951) (Teddy Katz)
    • 47ac478 Update: add named imports and exports for object-curly-newline (#9876) (Nicholas Chua)
    • e8efdd0 Fix: support Rest/Spread Properties (fixes #9885) (#9943) (Toru Nagashima)
    • f012b8c Fix: support Async iteration (fixes #9891) (#9957) (Toru Nagashima)
    • 74fa253 Docs: Clarify no-mixed-operators options (fixes #9962) (#9964) (Ivan Hayes)
    • 426868f Docs: clean up key-spacing docs (fixes #9900) (#9963) (Abid Uzair)
    • 4a6f22e Update: support eslint-disable-* block comments (fixes #8781) (#9745) (Erin)
    • 777283b Docs: Propose fix typo for function (#9965) (John Eismeier)
    • bf3d494 Docs: Fix typo in max-len ignorePattern example. (#9956) (Tim Martin)
    • d64fbb4 Docs: fix typo in prefer-destructuring.md example (#9930) (Vse Mozhet Byt)
    • f8d343f Chore: Fix default issue template (#9946) (Kai Cataldo)

    v4.17.0 - February 2, 2018

    • 1da1ada Update: Add "multiline" type to padding-line-between-statements (#8668) (Matthew Bennett)
    • bb213dc Chore: Use messageIds in some of the core rules (#9648) (Jed Fox)
    • 1aa1970 Docs: remove outdated rule naming convention (#9925) (Teddy Katz)
    • 3afaff6 Docs: Add prefer-destructuring variable reassignment example (#9873) (LePirlouit)
    • d20f6b4 Fix: Typo in error message when running npm (#9866) (Maciej Kasprzyk)
    • 51ec6a7 Docs: Use GitHub Multiple PR/Issue templates (#9911) (Kai Cataldo)
    • dc80487 Update: space-unary-ops uses astUtils.canTokensBeAdjacent (fixes #9907) (#9906) (Kevin Partington)
    • 084351b Docs: Fix the messageId example (fixes #9889) (#9892) (Jed Fox)
    • 9cbb487 Docs: Mention the globals key in the no-undef docs (#9867) (Dan Dascalescu)

    v4.16.0 - January 19, 2018

    • e26a25f Update: allow continue instead of if wrap in guard-for-in (fixes #7567) (#9796) (Michael Ficarra)
    • af043eb Update: Add NewExpression support to comma-style (#9591) (Frazer McLean)
    ... (truncated)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Making 'multi' to false results in the disappearence of the whole select box.

    Making 'multi' to false results in the disappearence of the whole select box.

    I need to make the select box single select only. But as soon as i make the prop multi to false, it just disappears!

    Removing the multi prop totally also results the same.

    opened by srihariash999 0
Owner
Rodrigo Lopes
Rodrigo Lopes
vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications

Vue Instant! vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications. Table of contents Examp

Santiago Blanco 420 Dec 27, 2022
An autocomplete/typeahead component for Vue 2 and Bootstrap 4

vue-bootstrap-typeahead A simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2 View The Examples Installation From NPM: > npm i

Alex Urquhart 209 Nov 19, 2022
A Vue Autocomplete component with accessibility and simplicity in mind.

VueCompleter A Vue Autocomplete component with accessibility and simplicity in mind. Installation npm install vue-completer or yarn add vue-completer

Tom Elliott 3 Nov 8, 2020
Autocomplete - Accessible autocomplete component for vanilla JavaScript and Vue

Autocomplete Accessible autocomplete component for vanilla JavaScript and Vue. Demo Take a look at the documentation page, and the Codepen examples. F

Muhamad Septian 0 Dec 3, 2019
A better vim plugin for stylus, including proper and up-to-date syntax highligting, indentation and autocomplete

Vim Stylus Vim + Stylus = fast, effective and convenient CSS workflow! Features All HTML5 tags and CSS3 props are covered Correct highlighting for int

Ilia Loginov 48 Dec 28, 2022
Autocomplete component for Vue.js

v-autocomplete Autocomplete component for Vue.js This component is css-free. The idea is to be used with any framework. Installation Using yarn yarn a

Marcos 347 Jan 3, 2023
Autocomplete component for Vue js

vuejs-auto-complete A Vue autocomplete component npm install vuejs-auto-complete --save Usage Installation, add autocomplete component into your app i

Charlie Kassel 136 Nov 8, 2022
🔍 Vue autosuggest component.

vue-autosuggest ?? Autosuggest component built for Vue. Table of Contents Examples Features Installation Usage Props Inspiration Contributors LICENSE

Darren Jennings 599 Dec 31, 2022
Feature-rich autocomplete component for Vue.js

vue-simple-suggest Simple yet feature-rich autocomplete component for Vue.js Install npm install --save vue-simple-suggest See installation guide for

Marketplace Technologies 442 Jan 4, 2023
A Vue component for autocomplete email domains

vue-email-dropdown A Vue component for autocomplete email domains Features Allows passing a list of domains to be used in for the suggestions. Allows

Danny Feliz 27 Nov 24, 2022