Just another vue&tailwind component that present you complete typeahead/autocomplete input.

  • By Başar Özcan
  • Last update: Dec 16, 2022
  • Comments: 3

Logo

vue-tailwindcss-typeahead

Just another vue&tailwind component that present you complete typeahead/autocomplete input.
Explore the docs »

View Demo on Codesandbox · Report Bug · Request Feature

Table of Contents

About The Project

component

I can't find any independent typeahead/autocomplete input component. All of them comes with UI libraries.

Built With

  • Vue
  • Tailwindcss

Getting Started

To get a local copy up and running follow these simple steps.

Installation

  1. Get package from npm
npm install vue-tailwindcss-typeahead

Default Import

Install the component:

import Vue from 'vue'
import VueTailwindcssTypeahead from '@/vue-tailwindcsscss-typeahead.vue';

Vue.use(VueTailwindcssTypeahead)

Browser

<link rel="stylesheet" href="vue-tailwindcss-typeahead/dist/vue-tailwindcss-typeahead.css"/>

<script src="vue.js"></script>
<script src="vue-tailwindcss-typeahead/dist/vue-tailwindcss-typeahead.min.js"></script>

If Vue is detected, the plugin will be installed automatically. If not, install the component:

Vue.use(VueTailwindcssTypeahead)

Usage

Call the component on parent

<vue-tailwindcsscss-typeahead 
  :lists="list"
  @selected="selectedData"
  :ignoredList="selectedItemIds"
  :clearInputWhenClicked="false"
  :inputClass="['w-full','px-3','py-2','border','border-gray-400','rounded-lg','outline-none','focus:shadow-outline']"
  placeholder="Please write a city name">
  </vue-tailwindcsscss-typeahead>

Code on parent component

<script>
  import Vue from 'vue';
  import VueTailwindcssTypeahead from '@/vue-tailwindcsscss-typeahead.vue';

  export default Vue.extend({
    name: 'ParentComponent',
    components: {
      VueTailwindcssTypeahead
    },
    data() {
      return {
        list: [
          {
            id: 1,
            name: "Amsterdam",
          },
          {
            id: 2,
            name: "Berlin",
          },
          {
            id: 3,
            name: "Istanbul",
          },
        ],
        selectedItemIds: [],
        selectedItem: null
      };
    },
    methods: {
      selectedData(value) {
        this.selectedItem = value
      },
    },
  });
</script>

Properties

props description Type
lists pass an array of data. id and name attribute must be passed Array
ignoredList selected item's id will be passed to this variable and this item will not be showed if user want to change it Array
clearInputWhenClicked If this is set to true, input will be cleared after selection. Best for multiple selections Boolean
inputClass Tailwindcss classes can be passed to change input's class Array
placeholder placeholder text for input String
@selected point method on parent component for custom operations

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Twitter - @basarozcan

Github

https://github.com/basarozcan/vue-tailwindcss-typeahead

Comments(3)

  • 1

    Getting Dependency Not Found

    Hi, I want to use this in my nuxt project.

    Installed it using npm package and then

    i have created a plugin tailwind-typeahead.js and included the plugin file in nuxt.config.js

    import Vue from 'vue'
import VueTailwindcssTypeahead from '@/vue-tailwindcsscss-typeahead';

Vue.use(VueTailwindcssTypeahead)`

    but getting error as follows,

    This dependency was not found:                                                                                   friendly-errors 01:44:37
                                                                                                                 friendly-errors 01:44:37
* @/vue-tailwindcsscss-typeahead in ./plugins/tailwind-typeahead.js                                              friendly-errors 01:44:37
                                                                                                                 friendly-errors 01:44:37
To install it, you can run: npm install --save @/vue-tailwindcsscss-typeahead
  • 2

    Error "ClickOutside is not defined"

    I installed as follows:

    npm install --save vue-tailwindcss-typeahead --force

    Have to use --force, otherwise I get dependency errors. In my main.js I have this:

    import { createApp } from 'vue'
import { fbAuth } from '@/firebase/config'

import App from '@/App.vue'
import router from '@/router'
import VTooltip from 'v-tooltip'
import VueTailwindcssTypeahead from 'vue-tailwindcss-typeahead/dist/vue-tailwindcss-typeahead.min'

let app

fbAuth.onAuthStateChanged(_user => {
    // Only mount the app to the DOM if the user is not authenticated
    // This means once authenticated a browser refresh doesn't result into having to login again
    if (!app) {
        app = createApp(App)

        // It's crucial to first define tooltip, before mounting the app
        app.use(VTooltip, {
            defaultDelay: {
                show: 500,
                hide: 500
            }
            // classes: 'bg-primary-blue-900 text-white'
        })
        app.use(VueTailwindcssTypeahead)

        app.use(router).mount('#app')
    }
})
...

    However, the browser shows this error: image

    I am using VueJS 3. Is this compatible with VueJS 3 at all?

  • 3

    Few feature requests

    Hi @basarozcan, great component! I have a few feature requests:

    1. The ability to use the cursor down and up key when the list with matches is shown, to immediately jump from the edit box to the list with matches and scroll through the matches and then use the Enter key to select the highlighted item. This saves user interaction having to move your hand away from the keyboard to the mouse.
    2. Show the mouse pointer as a hand (tailwind cursor-pointer) when you hover over de list with matches.
    3. The ability to show the selected value as a tag or nav pill, like this mockup:

    image

    1. Ability to multi-select, like this mockup:

    image

Popular Tag

Related