Jquery tagEditor plugin in dotnet core

Author : Sachin Sharma
Published On : 02 Dec 2022

TagEditor is very powerful jquery plugin for tagging.

Benefits of tagEditor:

  1. Add multiple tags and can put limits to add tags like  add only 5 tags .
  2. Optional jQuery UI sortable
  3. Optional jQuery UI autocomplete
  4. Delimiters to separation of Tags

 

yes/

Here I explained how to use tagEditor in dotnet core using jquery.

<script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link href="~/lib/tag-editor/jquery.tag-editor.css" rel="stylesheet">
    <script src="https://code.jquery.com/1.13.2/jquery-min.js"></script>    
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>    
    <script src="~/lib/tag-editor/jquery.caret.min.js"></script>
    <script src="~/lib/tag-editor/jquery.tag-editor.min.js"></script>   
</script>

<div class="row mg-t-20">
        <div class="col">
            <label>Tags</label>
            <input type="text" class="form-control" asp-for="Tags"/>
            <span asp-validation-for="Tags"></span>            
        </div>
</div>

$('#Tags').tagEditor({
            maxTags: 5, removeDuplicates: true, delimiter: ',; ',
            autocomplete: {
                delay: 0, position: { collision: 'flip' },
                source: function (request, response) {
                    $.get('url', { term: request.term }, function (res) {
                        if (res.status === 1) {
                            response($.map(res.data, function (c) {
                                return {
                                    label: c.name

                                         }
                            }));
                        }
                    });                  
                }
            }
        }); 

For autocomplete tags use jquery ui autocomplete.

Comments
Very nice article ,very helpful.
Very nice article
very nice article
Add Comment