Inputa virgülle eklenmiş kelimeleri etikete dönüştürme

Facebook üzerinden yeni bir yazı paylaştığınız  zaman  input  alanında yazdığınız yazı içine kişi isimlerini yazdığınızda arkadaş listenizdeki kişileri otomatik bulup yazıya etiketleyebiliyorsunuz.  Ayrıca wordpress kullanan kişilerde  bilirler yazıya etiket eklemek için input alanına  virgül ile girilen kelimeler yazıya etiket olarak atanıyordu. Her bir etiket  virgüller sayesinde  tespit  ediliyor.  jQuery Tags Input eklentiside  XOXCO sitesi tarafından bunlara benzer  olarak hazırlanmış  bir  çalışmadır.

Tags Input uygulamasında  input alanında gireceğiniz değerler uygulama  sayesinde  algılanıp kelimeleri etikete dönüştürebiliyor.  Input alanında  gireceğiniz  değerleri json dosyasından çekerek otomatik tamamlama olarak ta kullanabilirsiniz. Basit  olarak kullanabileceğiniz örnekte virgülle eklemiş olduğunuz kelime yada kelimeler  resimde görmüş olduğunuz  gibi bir çerçeveye eklenip çarpı işaretine tıklandığında  kısa yoldan silinebilme özelliği bulunuyor.  Etiketler için belirleyeceğiniz  bazı etiketlerinde farklı renkte görünmesini sağlayabilirsiniz. Tags Input kullanarak çok güzel form örnekleri hazırlayabilirsiniz.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js ve css dosya adresleri :

<link href="jquery.tagsinput.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.tagsinput.js"></script>

 JavaScript : 

       <script>
        	$(function(){

	        	$('#tags').tagsInput({
		        	"width": "75%",
		        	"height": "70px",
		        	'defaultText':''
	        	});	
	        	$('#tags_tag').focus();
        	});
	</script>

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

	<div id="tag-box">
		<input name="tags" id="tags" value="JQUERY, TAGS, INPUT, PLUGIN" />
	</div>