Dynamic Tags Input With Filter Support - jQuery sTags

Dynamic Tags Input With Filter Support - jQuery sTags

sTags is a dynamic, flexible jQuery tags management plugin which enables the user to add, remove, display, filter tags in an easy way.

1. To get started, load the jQuery library, jquery.sTags.css, and jquery.sTags.js in the html.

<link rel="stylesheet" href="jquery.sTags.css">
<script src="jquery.min.js"></script>
<script src="jquery.sTags.js"></script>

2. Create your own tag data in a JavaScript array.

var tagsdata=[]
tagsdata.push({id:1,name:"PHP",screen:"php"})
tagsdata.push({id:4,name:"C#",screen:"c"})
tagsdata.push({id:6,name:"JavaScript",screen:"javascript"})
tagsdata.push({id:2,name:"HTML5",screen:"html5"})
tagsdata.push({id:3,name:"Python",screen:"python"})
tagsdata.push({id:5,name:"jQuery",screen:"jquery"})
tagsdata.push({id:7,name:"CSS",screen:"css"})

3. Attach the plugin to an input field you specify. Done.

<input type="text" id="demo">
$("#demo").sTags({
  data: tagsdata
})

4. To only used to display tags on the page. Just attach the plugin to a DIV container.

<div id="demo"></div>
$("#demo").sTags({
  data: tagsdata
})

5. Customize the preselected tags.

$("#demo").sTags({
  data: tagsdata,
  defaultData:[1,3,2]
})

6. Randomize the tag colors.

$("#demo").sTags({
  data: tagsdata,
  color: 2
  colorData: [
    ["#90c5f0","#fff"],
    ["#8E388E","#fff"],
    ["#FFA500","#fff"],
    ["#FBF","#fff"],
    ["#DA70D6","#fff"],
    ["#A2CD5A","#fff"],
    ["#228B22","#fff"],
    ["#CDC0B0","#fff"],
    ["#CD7054","#fff"],
    ["#00688B","#fff"]
  ]
})

7. Enable/disable the search field.

$("#demo").sTags({
  data: tagsdata,
  screen: true,
  screenInput:{
    type:"text",
    size:8,
    placeholder:"Filter"
  }
})

8. Customize the click event.

$("#demo").sTags({
  data: tagsdata,
  tagHtml:"{name}-{id}",
  click:function(e){
    alert(e.attr("tagid"))
  }
})

9. Add more tags.

$("#demo").sTags({
  data: tagsdata,
  data_:[
    {
      name:"First",
      position:0,
      fn:function(){
        console.log("First")
      }
    },
    {
      name:"Last",
      position:1,
      fn:function(){
        console.log("Last")
      }
    }
  ]
})

10. Customize the tag URL.

$("#demo").sTags({
  data: tagsdata,
  dataAttr:["id","name"],
  tagName:"a",
  tagAttr:{
    href:"/tag/{id}",
    target:"_blank"
  }
})

11. More configuration options.

$("#demo").sTags({
  data: tagsdata,
  // default CSS classes
  tagInputCSS:"sTags-input",
  tagListCSS:"sTags",
  tagCSS:["sTags-old","sTags-new"],
  // prefix
  tagTXT:"Tags:"
})

This awesome jQuery plugin is developed by 28269890. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 06.03.2019
  • Source