simple-tags-input

KO | EN

gitlite — search

#python #hacktoberfest #react #llm #golang #machine-learning #rust #deep-learning #windows #awesome #kubernetes #vue #security #openai

simple-tags-input

(★ 10)

Simple and extremely easy tags input javascript plugin for anything that runs on browser 🌐 🚀

simple-tags-input Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# simple-tags-input
> Check the [CodePen examples](https://codepen.io/collection/KpWNGN) here.

Simple and extremely easy tags input for anything that runs on browser 🌐 🚀

## Quick start
**Installation with CDN**
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rk4bir/simple-tags-input@latest/src/simple-tag-input.min.css">

...

**Quick start html example**
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rk4bir/simple-tags-input@latest/src/simple-tag-input.min.css">
</head>

<script src="https://cdn.jsdelivr.net/gh/rk4bir/simple-tags-input@latest/src/simple-tag-input.min.js"></script>
     
     <script>
         let options = { inputEl: "tagsInput", listEl: "tagsList"};
         const tagsInput = new simpleTagsInput(options);
     </script>
</body>
</html>
        
```
## Usage
### Simple usecase
> Check the [codepen example](https://codepen.io/rk4bir/pen/wvpVKEz).
```html

<div>
    <ul id="tagsList"></ul>
    <input 
        type="text" 
        class="form-control" 
        id="tagsInput" 
        spellcheck="false" 
    />
</div>
```
```javascript
/* JavaScript code */
let options = {
    inputEl: "tagsInput", 
    listEl: "tagsList",
};
var tagsInput = new simpleTagsInput(options);
// get the tags list/array [tag1, tag2, ...]
tagsInput.getTags();
```

**Demo**
> Basic usecase demo

![basic-demo](https://raw.githubusercontent.com/raaihank/simple-tags-input/master/example/media/basic-demo.gif)

### Autocomplete search usecase
> Check the [codepen example](https://codepen.io/rk4bir/pen/QWaejYg).
```html

<div>
    <ul id="tagsList2"></ul>
    <input 
        type="text" 
        class="form-control" 
        id="tagsInput2" 
        spellcheck="false" 
    />
</div>
```
```javascript
/* JavaScript code */
let options = {
    inputEl: "tagsInput2", 
    listEl: "tagsList2",
    autocompleteSearchList: [
        "Afganistan", 
        "Bangladesh", 
        "China", 
        "India", 
        "Pakistan", 
        "Sri Lanka", 
        "United States", 
        "United Kingdom", 
        "Vietnam", 
        "Zimbabwe"
    ]
};
var tagsInputWithSearch = new simpleTagsInput(options);
// get the tags list/array [tag1, tag2, ...]
tagsInput.getTags();
```

**Demo**
> Autocomplete usecase demo

![basic-demo](https://raw.githubusercontent.com/raaihank/simple-tags-input/master/example/media/autocomplete-demo.gif)

---

## Contributors
> Thanks to these wonderful people for contributing to this project:

simple-tags-input

simple-tags-input Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

simple-tags-input

simple-tags-input Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README