Question

我想测试这个插件：http://xoxco.com/projects/code/tagsinput/使用ASP.NET MVC 5.我已经将CSS和JS文件导入到正确的位置并将它们放在捆绑包中但是代码根本不起作用对我的TextBoxFor＆lt;＆gt;没有任何影响

@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});

JQuery标签输入插件ASP.NET无法正常工作

1 个答案: