Adding JQuery Reference breaks tags input

Question

I am using a template that comes with a nice Tags Input, but I now want to be able to count the number of words and limit the number of words based on certain criteria, however, the only way I've found to do this is by using keyup of the specific textboxfor, but to do this I need to reference to JQuery, but then it breaks my tags input. Below is what I currently have:

@Html.TextBoxFor(model => model.EmploymentSkills, new { @id = "tags", @class = "form-control tagsinput", @type = "text", @placeholder = "Add skill and press enter", data_role = "tagsinput" })

<script src="~/SmartAdmin/scripts/plugin/bootstrap-tags/bootstrap-tagsinput.min.js"></script>

Is there a way I can do this with out referencing to JQuery, or able to reference to it and not break my tags input ?

Answer 1

So I found a solution to this. As mentioned above, the .keyup or .keydown didnt work, so I landed up using .change. This is the function I used, also counting the number of words and limiting them:

$(document).ready(function () {

    $(".tagsinput").change(function (e) {
        var value = $(this).val().replace(" ", "");
        var words = value.split(",");

        if (words.length > '@Model.TagsAllowed') {
            alert("You are not allowed more than '@Model.TagsAllowed' tags!");

            var lastword = value.split(",").pop();
            value = value.replace(',' + lastword, '');
            $(this).val(value);
            $('.tagsinput').val() = value.substring(0, value.length - lastword.length);
        }
    });
})

Hope this helps anyone else somewhere along the line.

Answer 2

Is there something specific with data_roleattribute? As long as i remember you should put all attributes in @ if using XPath. Try replacing data_role = 'tagsinput' to @data-role = 'tagsinput'. Maybe that is causing the issue.