Vanilla JS · No Dependencies

onvshark-tags-input

Lightweight, zero-dependency tags input for any web project. Attach it to a text input by id: free tags, or pick-only tags from a local list or a search URL.

Lihat di GitHub
version license vanilla js no dependencies
v1.1.0  ·  by Refael Sinaga

Installation

<link rel="stylesheet" href="tagsinput.css">
<script src="tagsinput.js"></script>

Live Demo

Free tags

Ketik lalu Enter atau koma. Paste a,b,c jadi 3 tag. Backspace di field kosong hapus tag terakhir.

value:

Local list (array)

source: KATEGORI — pilih dari daftar, teks di luar daftar ditolak.

value:

Search URL, max 3

source: '/api/provinsi?q=', max: 3 — demo ini pakai fetch tiruan.

value:

List + new tags (creatable)

creatable: true — teks yang tidak ada di daftar muncul sebagai + Tambah "teks".

value:

Follows your theme class

<input class="my-input"> — class pindah ke wrapper.

value:

API Reference

const tags = OnvTagsInput.init(id, options)
#ParameterTypeDescription
1 id string | HTMLInputElement Input id ('kota' or '#kota') or the element
2 options object Optional, see the options table below

Options

KeyTypeDefaultDescription
sourcearray | stringnullEmpty = free tags. Array = pick from local list. String URL = search via fetch(url + query)
creatablebooleanfalseWith a source: text not in the list can become a new tag
maxnumber0Maximum number of tags, 0 = unlimited
separatorstring','Separator used in the input value

Modes

sourceBehavior
emptyFree tags. Enter or comma adds a tag. Leftover text on blur becomes a tag.
arrayLocal list. Typing filters the list, pick with click or arrows + Enter. Text not in the list is rejected. The array is read live.
string URLServer list. Same as array, the list comes from fetch(url + text) while typing (250 ms delay).
+ creatableList + new tags. No exact match shows + Tambah "text". New tag value = its text, chip gets .onvs-tagsinput-tag-new.

Source items can be strings or { value, label } objects. The input stores the value, the chip shows the label. A URL must return that array as JSON, or { data: [...] }.

Return

Property / MethodDescription
getTags()Array of values, e.g. ['1', '5'] (a new tag's value is its text)
getNewTags()Array of texts of new tags (creatable)
setTags(list)Replace all tags. Values or { value, label }
add(tag)Add one tag. Returns false when duplicate / full / empty
remove(value)Remove a tag by value
elementWrapper element (.onvs-tagsinput)

Code Examples

Free tags

OnvTagsInput.init('kota')

Local list from Blade

OnvTagsInput.init('kategori', { source: @json($kategori) })
// [{ value: 1, label: 'Berita' }, { value: 2, label: 'Olahraga' }, ...]

Search URL

OnvTagsInput.init('provinsi', { source: '/api/provinsi?q=', max: 3 })
// Laravel route
Route::get('/api/provinsi', function (Request $request) {
    return DB::table('provinsi')
        ->where('nama', 'like', '%' . $request->q . '%')
        ->limit(20)
        ->get(['id as value', 'nama as label']);
});

Edit form with a URL source

const provinsi = OnvTagsInput.init('provinsi', { source: '/api/provinsi?q=' })
provinsi.setTags(@json($terpilih))  // [{ value: 3, label: 'Banten' }]

Save in Laravel

$ids = array_filter(explode(',', $request->kota));

Listen for changes

document.getElementById('kota').addEventListener('change', e => console.log(e.target.value))

Theme Variables

The input's own classes (e.g. form-control) move to the wrapper. An input without classes gets .onvs-tagsinput-plain.

VariableDefault
--onvs-tagsinput-tag-bg#5bc0de
--onvs-tagsinput-tag-text#fff
--onvs-tagsinput-tag-radius4px
--onvs-tagsinput-list-bg#fff
--onvs-tagsinput-list-border#d0d5dd
--onvs-tagsinput-list-hover#e9ecf2
--onvs-tagsinput-muted#98a2b3
--onvs-tagsinput-tag-new-bg#f79009
--onvs-tagsinput-create-text#1a4099

The original input is hidden, so a theme's .form-control:focus does not apply. Add a focus style yourself:

.onvs-tagsinput.form-control:focus-within { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); }

Behavior