Bootstrap Templates & Themes Logo Bootstrap Templates & Themes
Vue Bootstrap Typeahead screenshot

Vue Bootstrap Typeahead

Author Avatar Theme by Alexurquhart
Updated: 26 Jul 2022
206 Stars

An autocomplete/typeahead component for Vue 2 and Bootstrap 4

Github Live Preview

Categories

Vue Scss

Overview

The Vue-Bootstrap-Typeahead is an autocomplete/typeahead component built with Bootstrap 4 and Vue 2. It provides a simple list-group based typeahead functionality for better user experience. This project is no longer actively maintained but offers useful features for implementing autocomplete functionality in web applications.

Features

  • List-group based typeahead: Utilizes Bootstrap 4 for styling and Vue 2 for functionality.
  • Easy installation: Available on NPM with minified UMD and CommonJS builds.
  • Customizable appearance: Allows configuration of input-group size, background color, text color, and more.
  • Data handling: Works with already loaded API responses in array format for flexibility.
  • Event handling: Provides events like hit when an autocomplete item is selected and input for two-way binding with v-model.
  • Slots support: Offers prepend and append slots for customizing the appearance with buttons or other markup.
  • Scoped slots: Allows the use of a scoped slot called suggestion for defining custom content for suggestion list items.

Installation

To install the Vue-Bootstrap-Typeahead from NPM, you can follow these steps:

  1. Install the package:
npm install vue-bootstrap-typeahead
  1. Import and register the component in your Vue project:
import Typeahead from 'vue-bootstrap-typeahead'
Vue.component('typeahead', Typeahead)
  1. Use the component in your template with the required data attribute:
<typeahead :data="yourDataArray"></typeahead>

Summary

The Vue-Bootstrap-Typeahead is a useful autocomplete component that offers simple integration with Vue projects and provides flexibility in data handling and appearance customization. While it may not be actively maintained, it can still be a valuable tool for adding autocomplete functionality to web applications.