jQuery Tagit:使用输入按钮添加标签

时间:2014-03-20 15:43:20

标签: javascript jquery-plugins tag-it

我正在使用一个名为jQuery Tagit的非常棒的插件来开发我当前的项目。

一切都在(可疑)顺利进行,直到我试图添加自己的一点点jQuery。我的目标是为最终用户提供使用按钮添加标签的选项。我放了一些测试按钮,看它是否有效。

这个问题?我开发的代码用于粘贴所需的术语,但是当我输入标记时,目标输入看不到它。它会在那里停留几秒钟,然后自动删除。以下是我目前使用的代码:

HTML:

<input value="PHP" id="PHP" type="button" class="addIt">
<input value="Perl" id="Perl" type="button" class="addIt">
<input value="Java" id="Java" type="button" class="addIt">
<input value="Asp" id="Asp" type="button" class="addIt">

<ul id="demo1" data-name="nameOfSelect"></ul>
<div class="buttons">
    <button id="demo1GetTags" value="Get Tags">Get Tags</button>
</div>
<div id="recordtags">
    <h2>Tag Records</h2>
</div>

jQuery的:

$(function () {

var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
];

$('#demo1').tagit({
    tagSource:availableTags,
    select:true,
    sortable:true,
    allowNewTags:false,
    triggerKeys:['enter', 'comma','tab']
});

$("#demo1GetTags").click(function () { showTags($("#demo1").tagit("tags")) });

function showTags(tags) {
    console.log(tags);
    var string = "";
    for (var i in tags)
        string += tags[i].value + ",";
    var result = string.slice(0,-1);
    $('#recordtags').append( result+"<br>" );
}

//MY CLICK FUNCTION THAT ISN'T WORKING PROPERLY
$(".addIt").click(function(){
    var selectorTarget = "#demo1";

    var specificInput = " .tagit-new input.tagit-input";
    var where2paste = selectorTarget+specificInput;
    $( where2paste ).focus();
    var value = this.id;
    var pastefield = where2paste;
    var input = $(pastefield);
    input.val(input.val() + value + ',');
    return false;
});

setInterval("$('#fork').effect('pulsate', { times:1 }, 500);", 5000);
});

我的代码中的所有内容都完全按照需要工作,除了那个需要的功能。 :(所以我的问题是:我需要调整或修改哪些东西来帮助我使用输入按钮添加标签?非常感谢你提前。(e拥抱)

1 个答案:

答案 0 :(得分:1)

您只需使用tagit add方法。

代码:

//MY CLICK FUNCTION THAT ISN'T WORKING PROPERLY
$(".addIt").click(function () {
    $('#demo1').tagit('add', this.id);
    return false;
});

演示:http://jsfiddle.net/q87Hb