Cara Membuat Tags Input dengan Jquery Tagify

Tags input disini kita bisa memasukan tag lebih dari satu jadi dimana kita mempunyai sebuah inputan form dan kia masukan satu kalimat, dimana yang kita maksud adalah kalimat yang berbeda dan kita akan memisahkannya, biasanya tags inputan ini kita jumpai ketika kita buat artikel, upload video di youtube pasti kita menemui tampilan inputan tags ini, lalu berfungsi untuk apa sebenarnya, oke jangan kemana-mana simak artikel tentang cara membuat tags input dengan jquery tagify.

Tags input ini berfungsi untuk mencari atau sebagai kata kunci jika pengunjung ingin mencarinya pasti teman-teman pernah ya mencari kata kunci yang ada di search entah di youtube atau di satu website artikel, dan ini lah fungsi tags input di buat.

contoh di atas adalah contoh tags input yang ada di wordpress dan youtube.

Tetapi disini saya tidak akan membahas bagaiamana cara mengintegrasikan bagimana cara supaya kata kunci itu bisa di temui, tetapi disini kita buat tampilannya saja.

artikel ini hampir sama dengan artikel teman saya yang ada di siniÂ , bedanya yang kita akan pelajari disini adalah kita akan membuatnya menggunakan sebuah plugin, lalu apa keuntungannya, keunggulannya disini:

jika kita sudah selesai membuat tags kalimat, kita bisa pisahkan dengan koma atau enter.
kita bisa mencolsenya dengan button close.
kita bisa mengedit / merubah kata nya.
kita tidak perlu repot untuk menstyle inputannya sudah rapih.

yang saya gunakan dalam cara membuat tags input dengan jquery tagify, seperti judulnya saya menggunakan plugin dari jqueryscript jika teman-teman melihat disitu di masternya ada teman-teman yang kesulitan bagaimana cara menggunakannya maka dari itu disini saya akan mencontohkannya saja, teman-teman tinggal copy saja.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link href="tagify.css" rel="stylesheet">
</head>
<body>

	<h1>Cara Membuat Tags Input dengan Jquery Tagify</h1>
	<input name="tags" placeholder="Tuliskan disini" value="Cara Membuat Judul">

	<script src="http://code.jquery.com/jquery.min.js"></script>
	<script src="jQuery.tagify.js"></script>
	<script src="tagify.js"></script>
	<script type="text/javascript">
		var input = document.querySelector('input[name=tags]'),
	    // init Tagify script on the above inputs
	    tagify = new Tagify(input, {
	        whitelist : ["A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript", "Ada", "Adenine", "Agda", "Agilent VEE", "Agora", "AIMMS", "Alef", "ALF", "ALGOL 58", "ALGOL 60", "ALGOL 68", "ALGOL W", "Alice", "Alma-0", "AmbientTalk", "Amiga E", "AMOS", "AMPL", "Apex (Salesforce.com)", "APL", "AppleScript", "Arc", "ARexx", "Argus", "AspectJ", "Assembly language", "ATS", "Ateji PX", "AutoHotkey", "Autocoder", "AutoIt", "AutoLISP / Visual LISP", "Averest", "AWK", "Axum", "Active Server Pages", "ASP.NET", "B", "Babbage", "Bash", "BASIC", "bc", "BCPL", "BeanShell", "Batch (Windows/Dos)", "Bertrand", "BETA", "Bigwig", "Bistro", "BitC", "BLISS", "Blockly", "BlooP", "Blue", "Boo", "Boomerang", "Bourne shell (including bash and ksh)", "BREW", "BPEL", "B", "C--", "C++ â€“ ISO/IEC 14882", "C# â€“ ISO/IEC 23270", "C/AL", "CachÃ© ObjectScript", "C Shell", "Caml", "Cayenne", "CDuce", "Cecil", "Cesil", "CÃ©u", "Ceylon", "CFEngine", "CFML", "Cg", "Ch", "Chapel", "Charity", "Charm", "Chef", "CHILL", "CHIP-8", "chomski", "ChucK", "CICS", "Cilk", "Citrine (programming language)", "CL (IBM)", "Claire", "Clarion", "Clean", "Clipper", "CLIPS", "CLIST", "Clojure", "CLU", "CMS-2", "COBOL â€“ ISO/IEC 1989", "CobolScript â€“ COBOL Scripting language", "Cobra", "CODE", "CoffeeScript", "ColdFusion", "COMAL", "Combined Programming Language (CPL)", "COMIT", "Common Intermediate Language (CIL)", "Common Lisp (also known as CL)", "COMPASS", "Component Pascal", "Constraint Handling Rules (CHR)", "COMTRAN", "Converge", "Cool", "Coq", "Coral 66", "Corn", "CorVision", "COWSEL", "CPL", "CPL", "Cryptol", "csh", "Csound", "CSP", "CUDA", "Curl", "Curry", "Cybil", "Cyclone", "Cython", "M2001", "M4", "M#", "Machine code", "MAD (Michigan Algorithm Decoder)", "MAD/I", "Magik", "Magma", "make", "Maple", "MAPPER now part of BIS", "MARK-IV now VISION:BUILDER", "Mary", "MASM Microsoft Assembly x86", "MATH-MATIC", "Mathematica", "MATLAB", "Maxima (see also Macsyma)", "Max (Max Msp â€“ Graphical Programming Environment)", "Maya (MEL)", "MDL", "Mercury", "Mesa", "Metafont", "Microcode", "MicroScript", "MIIS", "Milk (programming language)", "MIMIC", "Mirah", "Miranda", "MIVA Script", "ML", "Model 204", "Modelica", "Modula", "Modula-2", "Modula-3", "Mohol", "MOO", "Mortran", "Mouse", "MPD", "Mathcad", "MSIL â€“ deprecated name for CIL", "MSL", "MUMPS", "Mystic Programming L"]
	    });
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Cara Membuat Tags Input dengan Jquery Tagify</h1>

var input = document.querySelector('input[name=tags]'),

// init Tagify script on the above inputs

tagify = new Tagify(input, {

whitelist : ["A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript", "Ada", "Adenine", "Agda", "Agilent VEE", "Agora", "AIMMS", "Alef", "ALF", "ALGOL 58", "ALGOL 60", "ALGOL 68", "ALGOL W", "Alice", "Alma-0", "AmbientTalk", "Amiga E", "AMOS", "AMPL", "Apex (Salesforce.com)", "APL", "AppleScript", "Arc", "ARexx", "Argus", "AspectJ", "Assembly language", "ATS", "Ateji PX", "AutoHotkey", "Autocoder", "AutoIt", "AutoLISP / Visual LISP", "Averest", "AWK", "Axum", "Active Server Pages", "ASP.NET", "B", "Babbage", "Bash", "BASIC", "bc", "BCPL", "BeanShell", "Batch (Windows/Dos)", "Bertrand", "BETA", "Bigwig", "Bistro", "BitC", "BLISS", "Blockly", "BlooP", "Blue", "Boo", "Boomerang", "Bourne shell (including bash and ksh)", "BREW", "BPEL", "B", "C--", "C++ â€“ ISO/IEC 14882", "C# â€“ ISO/IEC 23270", "C/AL", "CachÃ© ObjectScript", "C Shell", "Caml", "Cayenne", "CDuce", "Cecil", "Cesil", "CÃ©u", "Ceylon", "CFEngine", "CFML", "Cg", "Ch", "Chapel", "Charity", "Charm", "Chef", "CHILL", "CHIP-8", "chomski", "ChucK", "CICS", "Cilk", "Citrine (programming language)", "CL (IBM)", "Claire", "Clarion", "Clean", "Clipper", "CLIPS", "CLIST", "Clojure", "CLU", "CMS-2", "COBOL â€“ ISO/IEC 1989", "CobolScript â€“ COBOL Scripting language", "Cobra", "CODE", "CoffeeScript", "ColdFusion", "COMAL", "Combined Programming Language (CPL)", "COMIT", "Common Intermediate Language (CIL)", "Common Lisp (also known as CL)", "COMPASS", "Component Pascal", "Constraint Handling Rules (CHR)", "COMTRAN", "Converge", "Cool", "Coq", "Coral 66", "Corn", "CorVision", "COWSEL", "CPL", "CPL", "Cryptol", "csh", "Csound", "CSP", "CUDA", "Curl", "Curry", "Cybil", "Cyclone", "Cython", "M2001", "M4", "M#", "Machine code", "MAD (Michigan Algorithm Decoder)", "MAD/I", "Magik", "Magma", "make", "Maple", "MAPPER now part of BIS", "MARK-IV now VISION:BUILDER", "Mary", "MASM Microsoft Assembly x86", "MATH-MATIC", "Mathematica", "MATLAB", "Maxima (see also Macsyma)", "Max (Max Msp â€“ Graphical Programming Environment)", "Maya (MEL)", "MDL", "Mercury", "Mesa", "Metafont", "Microcode", "MicroScript", "MIIS", "Milk (programming language)", "MIMIC", "Mirah", "Miranda", "MIVA Script", "ML", "Model 204", "Modelica", "Modula", "Modula-2", "Modula-3", "Mohol", "MOO", "Mortran", "Mouse", "MPD", "Mathcad", "MSIL â€“ deprecated name for CIL", "MSL", "MUMPS", "Mystic Programming L"]

});

</script>

</body>

</html>

Jadi disini saya merangkum bagian mana yang penting saja, jadi teman-teman silahkan copy saja kodingan di atas, maka akan tampil seperti ini:

Silahkan teman-teman coba masukan data, hapus, dan edi, dan saya rasa cukup sampai disini belajar kita tentang cara membuat tags input dengan jquery tagify, semoga bermanafaat dan sampai jumpa pada artikel berikutnya terimakasih.

Facebook DUMET School

Categories