A simple component to display a typeahead format with Vue3.

Status

Demo

Install

npm install vue-next-typeahead

Quick start

Globally

You can import in your main.js file

import App from './App.vue'
import { createApp } from 'vue'
import VueNextTypeahead from 'vue-next-typeahead'

const app = createApp(App)
app.component(VueNextTypeahead)

Locally in any component

import VueNextTypeahead from 'vue-next-typeahead'

export default {
  components: {
    VueNextTypeahead
  }
};

Basic usage

<template>
    <VueNextTypeahead
      v-model:input="inputSearch"
      :api-url="`http://openlibrary.org/search.json${inputSearch ? `?title=${inputSearch}` : ''}`"
      :title="'Encuentra libros que te gusten'"
      :placeholder="'Busca un libro...'"
      :items="results"
      :key-item="'title'"
      :loading-parent-component="loading"
      @response="getResponse"
      @reset="resetComponent()"
      @hit="selectItem" />
</template>

<script>
  export default {
    data () {
        return {
            results: [],
            loading: false,
            inputSearch: '',
            itemSelected: {}
        }
    },
    methods: {
        async getResponse (responseJson) {
            this.loading = true
            const response = await responseJson.json()
            this.results = response.docs
            this.loading = false
        },

        selectItem (item) {
            this.itemSelected = item
        },

        resetComponent () {
            this.results = []
        }
    }
  };
</script>

Props

| Property name | Type | Default |Description | | ------------------------------ | ---------- | --------- | -------------------------------------------------------- | | apiUrl | String | | URL to invoke the GET with fetch | input | String | '' | Default value of the input, used to make the data-binding. | title | String | null | Title that appears above the search input. | className | String | '' | Class to modify component styles. | items | Array | [] | Items to be displayed in the results dropdown. | keyItem | String | null | Key to display the desired value of the array 'items'. | showTitle | Boolean | true | Displays or not the title of the input. | placeholder | String | Qué necesitas... | Placeholder for search input. | noResultsText | String | No existen resultados para esa búsqueda... | Text to be displayed when there are no results in the search. | minChars | Number | 2 | Minimum of values until you start searching, at least it should be 1. | delay | Number | 500 | Time in milliseconds for the timeout used in the typing of the input. | loadingParentComponent | Boolean | true | Used in case it is necessary to make synchronous operations in the main service response in the component.

Emits

| Emit name | Description | | --------------- | ----------- | | update:input | In the parent component, you can use v-model:input="var" so that 'var' is automatically updated when you write in the input. | | response | First response returned by fetch GET. | | hit | Event launched when you click on an option of the items that appears in the dropdown. | | reset | When you reset all data within the component. | | error | Error returned by the GET service. |

Development

Note: Contributions are very welcomed, however is very important to open a new issue using the issue template before you start working on anything, so we can discuss it before hand

Fork the project and enter this commands in your terminal

git clone https://github.com/cristianpoleyJS/vue-next-typeahead.git
cd vue-next-typeahead
npm install
npm run serve

Commitlint

This project follows the commitlint guidelines, with minor changes.

TODO

• Unit testing with Jest.
• Web Component: Currently Vue3 does not support the generation of a Web Component, that's why I haven't generated it yet.

License

MIT © cristianpoleyJS