Tagsinput.js یک افزونه جی کوئری است که افزونه Bootstrap Tags Input jQuery را با آخرین نسخه فریم ورک Bootstrap کار می کند.
افزونه Tags Input به شما این امکان را می دهد تا تگ ها را در داخل یک فیلد ورودی input اضافه، حذف مدیریت کنید.
من در این مقاله میخوام استفاده از پلاگین jquery.tagsinput.js را به شما آموزش بدم که در یکی از پروژه های خودم به تازگی استفاده کردم.
در این مثال, یک فرم HTML با فیلد input داریم. ما تابع کتابخانه “Tags Input ” را بر اساس id فراخوانی می کنیم.
کد jQuery زیر برای فراخوانی تابع پلاگین “Tagsinput.js” استفاده شده است. از این کد برای تبدیل یک فیلد HTML برای افزودن تگ یا همان برچسب بهره بردیم.
پاین افزونه لیست تگ های مورد نظر شما را به یک ورودی جادویی تبدیل می کند. از این افزونه به راحتی می توانید در پروژه های خود استفاده کنید و آن را سفارشی سازی کنید برای مثال من از این پلاگین هنگام ثبت نام (افزودن مهارت های کاربر) استفاده کردم.
ابتدا فایل های جاوا اسکریپت را در قسمت فراخوانی فایل های جاوا اسکریپت و CSS را نیز قسمت فراخوانی فایل های external css را باید به پروژه خود اضافه کنید:
<script src="jquery.tagsinput.js"></script>
</ "link rel="stylesheet" type="text/css" href="jquery.tagsinput.css>
یک تگ input ایجاد کنید که حاوی لیستی از برچسب‌ها باشد که با کاما از هم جدا شده‌اند. میتوانید هر تگ پیش‌فرض را در ویژگی value قرار دهید، و آنها به درستی مدیریت می‌شوند :
</ "input name="tags" id="tags" value="foo,bar,baz>
در صورتی که بخواهید در فیلد input شما فاقد مقادیر پیش فرض باشد میبایست value را از داخل تگ input حذف کنید :
</"input name="tags" id="tags>
سپس، به سادگی تابع tagsInput را در هر فیلدی که باید به عنوان لیستی از برچسب ها در نظر گرفته شود، فراخوانی کنید.
$('#tags').tagsInput();
با فراخوانی توابع addTag() و removeTag() می توانید تگ ها را اضافه و حذف کنید:
$('#tags').addTag('foo');
$('#tags').removeTag('bar');
با استفاده از تابع importTags() می توانید لیستی از برچسب ها را وارد کنید:
$('#tags').importTags('foo,bar,baz');
همچنین می توانید از importTags() برای تنظیم مجدد لیست برچسب ها استفاده کنید:
$('#tags').importTags('');
و می توانید با استفاده از tagExist() بررسی کنید که آیا تگ وجود دارد یا خیر...
if ($('#tags').tagExist('foo')) {
دستورات موردنظر شما
}
اگر هنگام افزودن یا حذف یک آیتم، به عملکرد اضافه و حذف نیاز داشته باشید یعنی اگر بخواهید یک تابع تعریف کنید، تنها باید نام تابع تعریف شده را تابع مورد نظر به صورت زیر فراخوانی کنید :
در صورتی که هتگام تعریف تابع پارامتر ورودی تعریف کرده باشید نیازی نیست این قسمت هم نام پارامتر ورودی تعریف کنید.
'onAddTag' : نام تابع (برای مثال addTag)
'onRemoveTag' : نام تابع (برای مثال removeTag)
function onAddTag(tag) {
alert("Added a tag: " + tag);
{
function onRemoveTag(tag){
alert("Removed a tag: " + tag);
{
به‌طور پیش‌فرض، اگر مکان‌نما بلافاصله بعد از یک تگ باشد، با زدن بک اسپیس آن تگ حذف می‌شود. اگر میخواهید این مورد را لغو کنید، گزینه «removeWithBackspace» را روی false تنظیم کنید.
$(function() {
$('#tags').tagsInput({
'autocomplete_url': url_to_autocomplete_api,
'autocomplete': { option: value, option: value},
'height':'100px',
'width':'300px',
'interactive':true,
'defaultText':'متن موردنظر',
'onAddTag':نام تابع,
'onRemoveTag': نام تابع,
'onChange' : نام تابع,
'delimiter': [',',';'], // Or a string with a single delimiter. Ex: ';'
'removeWithBackspace' : true,
'minChars' : 0,
'maxChars' : 0, // if not provided there is no limit
'placeholderColor' : '#666666'
})
});
شما نیز میتوانید جهت دریافت اطلاعات بیشتر به سایت زیر مراجعه کنید و از امکانات بیشتر این پلاگین استفاده کنید :
https://github.com/xoxco/jQuery-Tags-Input
همچنین در صورتی که میخواهید برای کاربر خود محدودیت تگ تعریف کنید میتوانید از کد جاوا اسکریپت زیر در پروژه خود استفاده کنید :
<form>
<input id="tags_1" class="tags cursor" />
</form>
<script>
var tagcount = 0;
$('#tags_1').tagsInput({
onAddTag: function(elem, elem_tags){
tagcount += $(this).length;
if(tagcount > 3){
alert(' شما تنها می توانید حداکثر سه تخصص خود را وارد نمایید');
$(this).removeTag(elem);
}
},
onRemoveTag: function(){
tagcount -= $(this).length;
}
});
</script>
