JQuery 标签输入插件 ASP.NET 不工作

Question

我想测试这个插件:http://xoxco.com/projects/code/tagsinput/使用 ASP.NET MVC 5。我已经将 CSS 和 JS 文件导入到正确的位置并将它们放在 bundle 中，但是代码根本不起作用并且对我的 TextBoxFor<>

没有影响

@Html.JQueryUI().Tooltip(".tooltip-example-3").Track(true).Hide(Effect.Scale).Show(Effect.Scale)
<div class="form-group">
     <div class="tooltip-example-3">
         @Html.LabelFor(model => model.Tags, new { @class = "control-label col-md-2" })
         <div class="tags">
             <div class="col-md-10">
                 @Html.TextBoxFor(model => model.Tags, new {id = "tags_1"})
                 @Html.ValidationMessageFor(model => model.Tags)
             </div>
         </div>
     </div>
</div>

我已将此 JavaScript 放在我的页面顶部:

function onAddTag(tag) {
    alert("Added a tag: " + tag);
}
function onRemoveTag(tag) {
    alert("Removed a tag: " + tag);
}

function onChangeTag(input, tag) {
    alert("Changed a tag: " + tag);
}

$(function () {

    $('#tags_1').tagsInput({ width: 'auto' });
    $('#tags_2').tagsInput({
        width: 'auto',
        onChange: function (elem, elem_tags) {
            var languages = ['php', 'ruby', 'javascript'];
            $('.tag', elem_tags).each(function () {
                if ($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0)
                    $(this).css('background-color', 'yellow');
            });
        }
    });
    $('#tags_3').tagsInput({
        width: 'auto',

        //autocomplete_url:'test/fake_plaintext_endpoint.html' //jquery.autocomplete (not jquery ui)
        autocomplete_url: 'test/fake_json_endpoint.html' // jquery ui autocomplete requires a json endpoint
    });


    // Uncomment this line to see the callback functions in action
    //          $('input.tags').tagsInput({onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag});

    // Uncomment this line to see an input with no interface for adding new tags.
    //          $('input.tags').tagsInput({interactive:false});
});

它根本不起作用。任何帮助都会很棒:)

Answer 1

这是您必须在脚本中更改的内容。

function AddTag(tag) {
alert("Added a tag: " + tag);
}
function RemoveTag(tag) {
alert("Removed a tag: " + tag);
}
function onChangeTag(input, tag) {
alert("Changed a tag: " + tag);
}
$('#tags_1').tagsInput({width:'auto',onAddTag:AddTag,onRemoveTag:RemoveTag});