Home > Developer > JavaScript
Use of jQuery Tags Input Plugin plug-in
A tag enhancement plug-in developed by jquery can generate or delete tags, check duplicate input tags, and implement automatic completion with the JQuery autocomplete plug-in. Introduce <link href = ".. /.. /resources/css/jquery.tagsinput.css "rel =" stylesheet "type =" text/css "/> <script type =" text/javascript "src = ".. /.. /resources/js/jquery. mytagsinput. js "> </script> I made some changes here. The file address is at the end of the article. JavaScript
<Script type = "text/javascript">/***** @ Author sonet * to change the Tags configuration, go to jquery. tagsinput. change ** // add tags function onAddTag (tag) in js {$. mpbAlert ({// mpbAlert is your tool class here. You can change it to your own pop-up layer content: "OK to add" + tag, icon: "question", OK: function () {// add tags $. mpbAjax ("/admin/job/addJobTypes", {data: {_ method: "PUT", tagName: tag}, async: false, success: function (data) {LoadData (); location. reload () ;}}); // end add tags}, cancel: function () {$ ("# tags "). removeTag (tag) ;}}) ;}// remove tags function onRemoveTag (tag. mpbAlert ({content: "confirm to delete" + tag, icon: "question", OK: function () {// delete tags $. mpbAjax ("/admin/job/removeJobTypes", {data: {_ method: "DELETE", tagName: tag}, async: false, success: function (data) {LoadData () ;}}); // delete add tags}, cancel: function () {$ ("# tags "). addTag (tag) ;}}) ;}// change tags function onChangeTag (input, tag) {alert ("Changed a tag:" + tag );} // tags controller $ (function () {LoadData (); $ ("span. tag "). click (function () {alert ("adsdad") ;}); $ ("# tags "). tagsInput ({width: 'auto', onAddTag: function (tag) {onAddTag (tag) ;}, onRemoveTag: function (tag) {onRemoveTag (tag );}//, // interactive: false // do not add tags}); function LoadData () {$. mpbAjax ("/admin/job/getAllJobTypes", {data: {_ method: "GET"}, async: false, success: function (data) {// use the concatenation string to display the tag var strs = ""; for (var I in data) {strs + = data [I]. name + "," ;}strs = strs. substring (0, strs. length-1); $ ("# tags "). attr ("value", strs) ;}}) ;}// edit tags function editTags (value) {$. mpbAlert ({content: "confirm to change to <input type = \" text \ "id = \" editTags \ "value = \" "+ value +" \ "> ", icon: "", OK: function () {var newTag = $ ("# editTags "). val (); $. mpbAjax ("/admin/job/updateJobTypes", {data: {_ method: "POST", oldTag: value, newTag: newTag}, async: false, success: function (data) {location. reload () ;}}) ;}, cancel: function () {}}) ;}function addNewTag () {var str =$ ("# addNewTag "). val (); if ($. isNotBlank (str) {onAddTag (str) ;}</script>
Xx.html> the value of the body retrieved from the background is combined into a "," string by js processing and assigned to the value attribute of the input tag whose id is tags. Example: a, B, c
<Body> enter a job category: <input type = "text" id = "addNewTag" value = ""/> <input type = "submit" onclick = "addNewTag (); "value =" add "/> <form> <p> <label> job category management: </label> </p> <input id = "tags" type = "text" class = "tags" value = "a, B, c "/> </form> </body>
Jquery. mytagsinput. js
// Configuration area $. fn. tagsInput = function (options) {var settings = jQuery. extend ({interactive: true, // interactive defaultText: 'Add a category', // prompt minChars: 0, width: '100px ', // edit area width height: '300px ', // The height of the editing area autocomplete: {selectFirst: false}, 'hide': true, 'delimiter ':', ', // delimiter 'unique': true, // uniqueness removeWithBackspace: true, placeholderColor: '#666666', autosize: true, comfortZone: 20, inputPadding: 6*2}, options );
// The value in the Input box of the html page is split by the following code $. fn. tagsInput. importTags = function (obj, val) {$ (obj ). val (''); var id = $ (obj ). attr ('id'); var tags = val. split (delimiter [id]); for (I = 0; I <tags. length; I ++) {$ (obj ). addTag (tags [I], {focus: false, callback: false});} if (tags_callbacks [id] & tags_callbacks [id] ['onchange']) {var f = tags_callbacks [id] ['onchange']; f. call (obj, obj, tags [I]) ;}};
The separated characters call the addTag method to add the values to the domain.
// Add tags $. fn. addTag = function (value, options) {options = jQuery. extend ({focus: false, callback: true}, options); this. each (function () {var id = $ (this ). attr ('id'); var tagslist = $ (this ). val (). split (delimiter [id]); if (tagslist [0] = '') {tagslist = new Array ();} value = jQuery. trim (value); if (options. unique) {var skipTag = $ (this ). tagExist (value); if (skipTag = true) {// Marks fake input as n Ot_valid to let styling it $ ('#' + id + '_ tag '). addClass ('not _ valid') ;}} else {var skipTag = false;} if (value! = ''& SkipTag! = True) {$ ('<span> '). addClass ('tag '). append ($ ('<span> '). text (value ). append ('& nbsp;'), $ ('<a>', {href: '#', title: 'removing tag', text: 'X '}). click (function () {return $ ('#' + id ). removeTag (escape (value ));})). click (function () {// add edit funciton editTags (value); // call an external function to change it through the pop-up layer }). insertBefore ('#' + id + '_ addTag'); tagslist. push (value); $ ('#' + id + '_ tag '). val (''); if (options. focus) {$ ('#' + id + '_ tag '). focus ();} else {$ ('#' + id + '_ tag '). blur () ;}$. fn. tagsInput. updateTagsField (this, tagslist); if (options. callback & tags_callbacks [id] & tags_callbacks [id] ['onaddtag']) {var f = tags_callbacks [id] ['onaddtag']; f. call (this, value);} if (tags_callbacks [id] & tags_callbacks [id] ['onchange']) {var I = tagslist. length; var f = tags_callbacks [id] ['onchange']; f. call (this, $ (this), tagslist [I-1]) ;}}); return false ;}; // end add tags
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
