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

Just another vue&tailwind component that present you complete typeahead/autocomplete input.
https://github.com/basarozcan/vue-tailwindcss-typeahead

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/basarozcan/vue-tailwindcss-typeahead
• Owner: basarozcan
• Created: 2020-11-17T21:29:45.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-06-06T16:37:31.000Z (over 1 year ago)
• Last Synced: 2024-08-01T17:22:42.562Z (6 months ago)
• Language: Vue
• Size: 377 KB
• Stars: 20
• Watchers: 2
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-tailwindcss - Tailwind Typeahead - Typeahead/Autocomplete component built with Vue.js and Tailwind CSS. (UI Libraries, Components & Templates)

README

        







  

    

  

  
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](#about-the-project)

  * [Built With](#built-with)

* [Getting Started](#getting-started)

  * [Installation](#installation)

  * [Default Import](#default-import)

  * [Browser](#browser)

* [Usage](#usage)

* [Roadmap](#roadmap)

* [Contributing](#contributing)

* [License](#license)

* [Contact](#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

1. Get package from npm

```sh

npm install vue-tailwindcss-typeahead

```

### Default Import

Import component globally:

```javascript

import { VueTwTypeahead } from '@/vue-tailwindcss-typeahead.vue';

import { createApp } from "vue";

import App from "./components/App.vue";

const app = createApp(App)

app.use(VueTwTypeahead)

app.mount('#app');

```

## Usage

### Call the component on parent

```javascript

```

### Code on parent component

```javascript

  import {VueTwTypeahead} from '@/vue-tailwindcss-typeahead.vue';

  export default {

    name: 'ParentComponent',

    components: {

      VueTwTypeahead

    },

    data() {

      return {

        list: [

          {

            id: 1,

            name: "Amsterdam",

          },

          {

            id: 2,

            name: "Berlin",

          },

          {

            id: 3,

            name: "Istanbul",

          },

        ],

        selectedItemIds: [],

        selectedItem: null

      };

    },

    methods: {

      selectedData(value) {

        this.selectedItem = value

      },

    },

  }

```

### 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](https://github.com/basarozcan/vue-tailwindcss-typeahead/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](https://twitter.com/basarozcan)