How to make a “tags box” using jQuery (with text input field + tags separated by comma)

问题:

I am working on a web application that allows users to post content by tags but the thing is, how would I make a nice block around a tag if its separated by a comma and the text field value would still be the same only the view to the user would differ.

An example would be such as YouTube or StackOverflow, for now I don't need it to check a database or anything.

Thanks!

回答1:

jsBin demo

Something similar like StackOverflow does:

• Allows alphanumeric and +-.# (and trims whitespaces!)
• Convert to lowercase
• Create automatically the Tag Box on focusOut Enter , (add more | delimited keyCodes)
• Delete Tag Box on click (with confirmation)

$(function(){ // DOM ready    // ::: TAGS BOX    $("#tags input").on({     focusout : function() {       var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters       if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});       this.value = "";     },     keyup : function(ev) {       // if: comma|enter (delimit more keyCodes with | pipe)       if(/(188|13)/.test(ev.which)) $(this).focusout();      }   });   $('#tags').on('click', 'span', function() {     if(confirm("Remove "+ $(this).text() +"?")) $(this).remove();    });  });

#tags{   float:left;   border:1px solid #ccc;   padding:5px;   font-family:Arial; } #tags > span{   cursor:pointer;   display:block;   float:left;   color:#fff;   background:#789;   padding:5px;   padding-right:25px;   margin:4px; } #tags > span:hover{   opacity:0.7; } #tags > span:after{  position:absolute;  content:"×";  border:1px solid;  padding:2px 5px;  margin-left:3px;  font-size:11px; } #tags > input{   background:#eee;   border:0;   margin:4px;   padding:7px;   width:auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="tags">   <span>php</span>   <span>c++</span>   <span>jquery</span>   <input type="text" value="" placeholder="Add a tag" /> </div>

回答2:

You don't necessarily need to reinvent the wheel here. A number of libraries/plugins for this purpose already exist, one of which is Guillermo Rauch's TextboxList. You can find a demonstration here. It already has autocomplete support and a pretty extensive API, which is what the major hurdles in any implementation of this are going to be.

The original implementation used MooTools, but you can find a jQuery version by golive here.

回答3:

Put a text input within a div, then check for keypresses (such as the comma or space key), if it matches the key append a new span with the tag details to the div with jQuery.

I can provide more detail or an example if needed but it should be fairly straightforward to code.

回答4:

Use "Tagging Support" in select2 lists: https://select2.github.io/examples.html

    $(".js-example-tags").select2({   tags: true }) 

回答5:

I wanted to make a tag box like Facebook uses for tagging people, and found the available options to be bloated and/or not do a key thing I wanted: Require the tag exist in a preset list (which can be retrieved from an AJAX call.

I started with Roko C. Buljan's answer and then added a few important things.

• Arrow key navigation
• Requiring preset answers, as I said above
• data- attributes for easy gathering for a ajax-post.

Codepen for anyone interested

文章来源: How to make a “tags box” using jQuery (with text input field + tags separated by comma)