Home > Developer > JavaScript
No judgment is made for manual input. If necessary, you can add judgment in the keyup and change events.
For more information, see the comments in the code.
Demo and code:
<! Doctype html> <pead> <meta charset = "gbk"> <title> select a tag to the text field. You can select multiple tags, filter duplicate tags, and limit the number of tags. @ Mr. think </title> <style>/* reset css */body, input {letter-spacing: 1px; font: 12px/1.5 tahoma, arial, \ 5b8b \ 4f53} div, h2, p, input, select {margin: 0; padding: 0} input {vertical-align: middle} h1 {font-size: 1em; font-weight: normal} h1 a {background: #047; padding: 2px 3px; color: # fff; text-decoration: none} h1 a: hover {background: # a40000; co Lor: # fff; text-decoration: underline} h3 {color: #888; font-weight: bold; font-size: 1em; margin: 1em auto; position: relative}/* demo css */# demo input {_ margin-top: 1px; padding-left: 5px; border: 1px solid #999; width: 700px; height: 20px; font-size: 14px; color: #000} # dropbox {display: none; z-index: 9999; padding: 5px; background: # fff; border: 1px solid #999; border-top: 0; z-index: 999} # dropbox a {margin-right: 8px; text-decoratio N: none} # dropbox a: hover {text-decoration: underline} # dropbox p {line-height: 24px} # dropbox em. close {float: right; color: #999; font-style: normal; cursor: pointer} </style> <meta name = "author" content = "Mr. think qingbird "/> <meta name =" keywords "content =" Mr. think, front-end development, WEB front-end, front-end technology, front-end development, WEB front-end development, user experience, Website planning, website optimization, qingbird, javascript, jQuery, css, xhtml, html, UE, SEO, Mr. think blog, qingbird blog, PHP enthusiast, Bluebirdsky "/> <meta name =" description "Content =" Mr. think's blog, named qingbird, is now focused on WEB Front-end development and is also a PHP enthusiast. love thinking, a little code cleanliness, raw crab legs, love meat. here is where I record knowledge and things in my life. "/> </pead> <body> <label for =" tagsbox "> <strong> label: </strong> <input type = "text" value = "" class = "tagsbox" data-count = "10"/> </label> <em class =" close "title =" close "> close </em> <p> <strong> tips: </strong> select the following hot tags and used tags. The tags are automatically arranged in the form field. </P> <strong> Hot tags: </strong> time walk JavaScriptjQuery Plugin that year jQuery plug-in simple star mengtian clear mrthink.net </p> <strong> tags you have used: </strong> Xu Wei Sophie Zelmani Faye Wong xiaojuan & Ke $ HaShakira park tree Luo Dayou, a resident in the valley </p> <br style = "clear: both "/> <br style =" clear: both "/> <input value =" I used to test "style =" width: 200px "/> <select> <option> I am a drop-down list for testing </option> <option> 00 </option> <option> 00 </option> <option> 00 </option> </select> <input value = "I used to test" style = "width: 200px "/> <select> <option> I am a drop-down list for testing </option> <option> one </option> <option> two </option> <option> three </option> </select> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Copy codeThe Code is as follows:
; (Function (){
$. Fn. extend ({
ISelectTags: function (options ){
Var iset = {
Name: '. tagsbox', // form or class or id name
Drop: $ ('# dropbox'), // locate in the pop-up box
Pseudo class: $ ('# dropbox> p> A'), // you can locate the selected tag.
Close: $ ('em. close'), // close button to locate
Separator: ',', // delimiter between tags. We recommend that you use commas (,).
MaxCount: 10 // The default limit. You can also set the data-count value of the form to overwrite the default value.
}
Options = options | {};
$. Extend (iset, options );
Var _ input = $ (iset. name );
Var _ inputVal = _ input. val ();
Var _ arr = new Array (); // Array for storing tags
Var _ left = _ input. offset (). left; // left absolute distance
Var _ top = _ input. offset (). top + _ input. outerHeight (); // The absolute distance. The height of the form must be added here.
Var evaluate ('addingright '));
Iset.drop.css ({'position': 'absolute ', 'left': _ left + 'px', 'top': _ top + 'px ', 'width ': _ dropW + 'px '});
// The width of the pop-up box. The calculated value is equal to the actual width of the form. You can also define the value in the style directly.
Var _ txt = null;
Var _ maxCount = parseInt (_ input. attr ('data-count'); // limit the number of selections
If (isNaN (_ maxCount )){
_ MaxCount = iset. maxCount
}
_ Input. click (function (){
Iset. drop. show ();
Iset. drop. bgiframe (); // call the bgiframe plug-in to solve the infinite z-index of select in ie6
}). Bind ('keyup change', function (){
// You can extend the judgment when manually entering tags here
// If statement to avoid empty selection, the first character is a comma
If ($ (this). val () = ''){
_ Arr = new Array ();
} Else {
_ Arr = $ (this). val (). split (iset. separator); // update the tag value after you manually delete or modify the tag value.
}
});
$ (Document). click (function (e ){
// Close the pop-up box when you click the non-pop-up box area
// The following if statement is used to determine whether the passed class or id is
If (iset. name. charAt (0) = '#'){
If(e.tar get. id! = Iset. name. substring (1 )){
Iset. drop. hide ();
}
} Else if (iset. name. charAt (0) = '.'){
If(e.tar get. className! = Iset. name. substring (1 )){
Iset. drop. hide ();
}
}
});
Iset. drop. click (function (e ){
// Block default events in the pop-up box
E. stopPropagation ();
});
Iset. pseudo class. click (function (){
// Select a tag
_ Txt = $ (this). text ();
// The following $. inArray is used to determine whether it is repeated.
// If You Want To feedback the duplicate prompt or exit the limit number prompt, you can improve the if statement below
If ($. inArray (_ txt, _ arr) =-1) & (_ arr. length <_ maxCount )){
_ Arr. push (_ txt );
_ InputVal = _ arr. join (iset. separator );
_ Input. val (_ inputVal );
}
});
// Close the button
Iset. close. click (function (){
Iset. drop. hide ();
});
}
});
}) (JQuery );
Blog published in Mr. Think: http://mrthink.net/jquery-plugin-iselecttags/
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
