npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue3-bootstrap-autocomplete

v3.1.0

Published

A typeahead/autocomplete component for Vue 3 using Bootstrap 5

Downloads

291

Readme

Nodejs workflow status

vue-bootstrap-autocomplete

A simple list-group based typeahead/autocomplete using Bootstrap 5 and Vue 3

Getting started

Installation

// npm
npm install vue3-bootstrap-autocomplete

// yarn
yarn add vue3-bootstrap-autocomplete

Registration

import VueBootstrapAutocomplete from 'vue3-bootstrap-autocomplete';

// Required dependency of bootstrap css/scss files
import 'bootstrap/scss/bootstrap.scss';

// Global registration
Vue.component('vue-bootstrap-autocomplete', VueBootstrapAutocomplete)

// or

// Local Registration
export default {
  components: {
    VueBootstrapAutocomplete
  }
}

Basic Usage

The only required props are a v-model and a data array.

<vue-bootstrap-autocomplete
  v-model="query"
  :data="['Canada', 'United States', 'Mexico', 'Netherlands']"
/>

Reference

Props

| Name | type | Default | Description | | -------------------------- | :-------: | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | append | String | | Text to be appended to the input-group | | autoClose | Boolean | true | Whether the autocomplete should hide upon item selection | | backgroundVariant | String | | Background color for the autocomplete result list-group items. See values here. | | backgroundVariantResolver | Function | input => null | Function which accepts the current list item data and returns a background color for the current autocomplete result list-group item. The non-null/non-empty string value returned from this function will supersede the value specified in backgroundVariant. | | data | Array | | Array of data to be available for querying. Required | | disabled | Boolean | false | Enable or disable input field | | disabledValues | Array | false | The dropdown items to disable. | | disableSort | Boolean | false | If set to true, no sorting occurs and the list is presented to the user as it is given to the component. Use this if you sort the list before giving it to the component. Ex: an elasticsearch result being passed to Vue. | | highlightClass | String | vbt-matched-text | CSS class to style highlighted text | | ieCloseFix | Boolean | true | Adds (imperfect) handling for auto closing the typeahead list on focus out in IE | | inputClass | String | | Class to be added to the input tag for validation, etc. | | inputName | String | | Name to be added to the input tag. | | maxMatches | Number | 10 | Maximum amount of list items to appear. | | minMatchingChars | Number | 2 | Minimum matching characters in query before the typeahead list appears | | noResultsInfo | String | No results found. | Text to display when no results are found | | prepend | String | | Text to be prepended to the input-group | | screenReaderTextSerializer | Function | input => input | Function used to convert the entries in the data array into the screen reader text string. Falls back to the value of serializer. | | serializer | Function | input => input | Function used to convert the entries in the data array into a text string. | | showAllResults | Boolean | false | Show all results even ones that highlighting doesn't match. This is useful when interacting with a API that returns results based on different values than what is displayed. Ex: user searches for "USA" and the service returns "United States of America". | | showOnFocus | Boolean | false | Show results as soon as the input gains focus before the user has typed anything. | | size | String | | Size of the input-group. Valid values: sm, md, or lg | | textVariant | String | | Text color for autocomplete result list-group items. See values here. | | state | Boolean | | Whether the autocomplete should be in a valid or invalid state. |

Events

| Name | Description | | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | blur | Triggered when the input field loses focus, except when pressing the tab key to focus the dropdown list. | | focus | Triggered when the input element receives focus. | | hit | Triggered when an autocomplete item is selected. The entry in the input data array that was selected is returned. If no autocomplete item is selected, the first entry matching the query is selected and returned. | | input | The component can be used with v-model | | keyup | Triggered when any keyup event is fired in the input. Often used for catching keyup.enter. | | paste | Triggered when the user pastes text into the input field. |

Slots

Prepend / Append

There are prepend and append slots available for adding buttons or other markup. Overrides the prepend and append props.

Example
<vue-bootstrap-autocomplete :data="data" v-model="value">
  <template #prepend>
    <button class="btn btn-primary">Prepend</button>
  </template>
  <template #append>
    <button class="btn btn-primary">Append</button>
  </template>
</vue-bootstrap-autocomplete>

No Results Info

There is a noResultsInfo slot available for customizing the no results info text. Overrides the noResultsInfo fallback content, which is undefined by default.

Example
<vue-bootstrap-autocomplete :data="data" v-model="query">
  <template #noResultsInfo>
    <span>No results for <b>{{ query }}</b></span>
  </template>
</vue-bootstrap-autocomplete>

Scoped Slot

You can use a scoped slot called suggestion to define custom content for the suggestion list-item's. You can use bound variables data, which holds the data from the input array, and htmlText, which is the highlighted text that is used for the suggestion.

See the custom suggestion slot example for more info.