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

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

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

About the Project
- Built With
Getting Started
Usage
Roadmap
Contributing
License
Contact

About The Project

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

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.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
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)

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

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:

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:
1. Ability to multi-select, like this mockup: