For the time being, there is no judgment on manual input, and if necessary, you can add relevant judgment to KeyUp and change events.
For instructions and methods of invocation, see comments in code.
Demo and Code:
<!doctype html> <ptml> <pead> <meta charset= "GBK" > <title> Select Label to Text field effect, multiple selection/filter repeat/can limit number @m r.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;p adding:2px 3px;color: #fff; Text-decoration:none} H1 A:hover{background: #a40000; color: #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-decoration: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 Bluebird"/> <meta name= "keywords" conten T= "Mr.think, front-end development, Web front-end, front-end technology, front-end development, Web front-end development, user experience, website planning, website optimization, Bluebird, Javascript,jquery,css,xhtml,html,ue,seo,mr.think Blog , Bluebird Blog, PHP enthusiasts, Bluebirdsky "/> <meta name=" description "content=" Mr.think blog, Chinese network name Bluebird, is focused on the Web front-end development, Also a fan of PHP. Love to think, a little code neat, eat raw crab legs, like meat. This is where I keep track of my knowledge and life trivia. "/> </pead> <body> <!--DEMO start--> <div id= "Demo" > <label for= "tagsbox" ><strong> Tags: </strong><input type= "text" value= "Dot Me" class= "Tagsbox" data-count= "ten"/></label> <!--data-count to select the maximum number of labels, settings will overwrite the maxcount--> set in the plugin <div Id= "Dropbox" > <em class= "Close" title= "off" > off </em> <p><strong> warm tip:</strong> Select the following hot tags and used labels, and the labels will automatically flow to the form field. </p> <p><strong> Popular Tags:</strong> time stroll javascriptjquery plugin that year jquery plug-ins simple starry dream field sunny mrthink.net </p> <p><strong> The labels you have used:</strong> Xu Wei Sophie Zelmani Faye Wong Juan & Valley resident Ke$hashakira Hackberry Luo </p> </div> <!--//popup dropdown box--> <br/> <br/> & Lt;input value= "I was used to test"/> <select> <option> I was used to test the dropdown list </option> <option>00</option& Gt <option>00</option> <option>00</option> </select> </div> <input value= " I was used to test the "/> <select> <option> I was used to test the dropdown list </option> <option>one</option> <option& Gt;two</option> <option>three</option> </select> <!--DEMO end--> <script src= "http ://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js "></script> <script>/****************** * @author mr.think * @author Blog http://mrthink.net/* @2010.11.10 * can be freely reproduced and used, but please specify the copyright ownership ************** ////call Bgiframe to solve the problem of IE6 under cover of the dropdown list//bgiframe function Copyright (c) 2006 Brandon Aaron (http://brandonaaron.net ;(function ($) {$.fn.bgiframe = $.fn.bgifrAme = function (s) {//This are only for IE6 if ($.browser.msie &&/6.0/.test (navigator.useragent)) {s = $.ex Tend ({top: ' auto ',//Auto = = Currentstyle.bordertopwidth Left: ' auto ',//Auto = = Currentstyle.borderleftwidth WI DTH: ' Auto ',///auto = offsetwidth height: ' auto ',///Auto = = Offsetheight opacity:true, src: ' javascript:false; ' }, S | | {}); var prop = function (n) {return n&&n.constructor==number?n+ ' px ': n;}, html = ' <iframe class= ' bgiframe ' Frameborder= "0" tabindex= "-1" src= "' +s.src+ '" ' + ' style= "display:block;position:absolute;z-index:-1; ' + (S.opacity!== false? ' Filter:alpha (opacity=\ ' 0\ '); ': ') + ' top: ' + (s.top== ' auto '? ') Expression ((parseint (this.parentNode.currentStyle.borderTopWidth) | | 0) *-1 +\ ' px\ ') ':p rop (s.top)) + '; ' + ' Left: ' + (s.left== ' auto '? ') Expression ((parseint (this.parentNode.currentStyle.borderLeftWidth) | | 0) *-1 +\ ' px\ ') ':p rop (s.left)) + '; ' + ' width: ' + (s.width== ' auto '? ') Expression (this.parentnode.offsetwidth+\ ' px\ ') ':p rop (s.width)) + ';' + ' Height: ' + (s.height== ' auto '? Expression (this.parentnode.offsetheight+\ ' px\ ') ':p rop (s.height)) + '; ' + '/> '; Return This.each (function () {if ($ (' > Iframe.bgiframe ', this). length = = 0) this.insertbefore (document.createeleme NT (HTML), this.firstchild); }); return to this; }; }) (JQuery); Select Label to Text field plug-in;(function () {$.fn.extend {iselecttags:function (options) {var iset={name: '. Tagsbox ',//form or class or ID name Dr op:$ (' #dropbox '),//Popup positioning pseudoclass:$ (' #dropbox >p>a '),//selectable label Positioning close:$ (' em.close '),//Close button positioning separator: ', ',//label separator, it is recommended to use the English comma maxcount:10//default limit, or you can set the Data-count value of the form to override the default value} options = Options | | {}; $.extend (Iset, Options); var _input=$ (iset.name); var _inputval=_input.val (); var _arr=new Array (); The array that holds the label Var _left=_input.offset (). Left; Left absolute distance var _top=_input.offset (). Top+_input.outerheight (); On absolute distance, where you want to add the height of the form var _dropw=_input.outerwidth ()-parseint (_input.css (' border-left-width '))-parseint (_input.css ( ' Border-right-width ')-parseint (iset.drOp.css (' paddingleft '))-parseint (Iset.drop.css (' paddingright ')); Iset.drop.css ({' position ': ' absolute ', ' left ': _left+ ' px ', ' top ': _top+ ' px ', ' width ': _dropw+ ' px '}); The width of the pop-up box, which is calculated to be equal to the actual width of the form. can also be defined directly in the style. var _txt=null; var _maxcount=parseint (_input.attr (' Data-count '));//Limit select number if (isNaN (_maxcount)) {_maxcount=iset.maxcount} _ Input.click (function () {iset.drop.show (); Iset.drop.bgiframe ()//Call the Bgiframe plug-in to resolve the Z-index infinite problem for select under IE6}). Bind (' keyup change ', function () {// This is where you can extend the related judgments in the case of manual input tags//if statement avoids emptying the first word identifier comma if ($ (this). val () = = ') {_arr = new Array (); }else {_arr = $ (this). Val (). Split (Iset.separator);//update tag value after user manually delete or modify tag value}}; $ (document). Click (function (e) {//Turn off pop-up box when clicking Non popup area//The IF statement below is used to determine if the incoming is class or ID if (iset.name.charAt (0) = ' # ') {if ( E.target.id!=iset.name.substring (1)) {iset.drop.hide (); }}else if (iset.name.charAt (0) = = '. ') {if (e.target.classname!=iset.name.substring (1)) {iset.drop.hide (); } } }); Iset.drop.click (function (e) {//block Popup area default event E.stoppropAgation (); }); Iset.pseudoClass.click (function () {//Label selection _txt=$ (this). text (); The following $.inarray are used to determine whether repetition//if you want feedback to repeat the prompts or out of the limit of the number of hints, you can improve the following if statement if ($.inarray (_txt,_arr) ==-1) && (_arr.length<_ Maxcount)) {_arr.push (_txt); _inputval=_arr.join (Iset.separator); if (_inputval.charat (0) = = ', ') {//_inputval.replace (/,/, ')//} _input.val (_inputval); } }); Close button Iset.close.click (function () {iset.drop.hide (); }); } }); }) (JQuery); The plug-in calls $ (function () {$ (' #demo '). Iselecttags (); * * can also be passed in parameter call $ (' #test '). Iselecttags ({name: ' #test ', drop:$ ('. Drop '), ...}); */ }); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Copy Code code as follows:
;(function () {
$.fn.extend ({
Iselecttags:function (options) {
var iset={
Name: '. Tagsbox ',//form or class or ID name
drop:$ (' #dropbox '),//Popup positioning
pseudoclass:$ (' #dropbox >p>a '),//selectable label positioning
close:$ (' Em.close '),//Close button positioning
Separator: ', ',//label separator, recommended to use English comma
MAXCOUNT:10//default limit, or you can set the Data-count value of the form to override the default value
}
options = Options | | {};
$.extend (Iset, Options);
var _input=$ (iset.name);
var _inputval=_input.val ();
var _arr=new Array (); An array of stored labels
var _left=_input.offset (). Left; Left absolute distance
var _top=_input.offset (). Top+_input.outerheight (); Absolute distance, here to add the height of the form
var _dropw=_input.outerwidth ()-parseint (_input.css (' border-left-width '))-parseint (_input.css (' Border-right-width '))-parseint (Iset.drop.css (' paddingleft '))-parseint (Iset.drop.css (' paddingright '));
Iset.drop.css ({' position ': ' absolute ', ' left ': _left+ ' px ', ' top ': _top+ ' px ', ' width ': _dropw+ ' px '});
The width of the pop-up box, which is calculated to be equal to the actual width of the form. can also be defined directly in the style.
var _txt=null;
var _maxcount=parseint (_input.attr (' Data-count '))//Limit number of selections
if (isNaN (_maxcount)) {
_maxcount=iset.maxcount
}
_input.click (function () {
Iset.drop.show ();
Iset.drop.bgiframe ()//call Bgiframe plug-in to solve the z-index infinite problem of IE6 Select
}. Bind (' keyup change ', function () {
You can extend the relevant judgment in the case of manual input labels here
The IF statement avoids emptying the first word identifier a comma when it is again selected
if ($ (this). val () = = ') {
_arr = new Array ();
}else {
_arr = $ (this). Val (). Split (Iset.separator);//update label values after user manually deletes or modifies tag values
}
});
$ (document). Click (function (e) {
Close the pop-up box when you click the Non-pop-up area
The following if statement is used to determine whether the incoming class or ID
if (iset.name.charAt (0) = = ' # ') {
if (e.target.id!=iset.name.substring (1)) {
Iset.drop.hide ();
}
}else if (iset.name.charAt (0) = = '. ') {
if (e.target.classname!=iset.name.substring (1)) {
Iset.drop.hide ();
}
}
});
Iset.drop.click (function (e) {
Block Popup Area Default event
E.stoppropagation ();
});
Iset.pseudoClass.click (function () {
Label selection
_txt=$ (This). text ();
The following $.inarray are used to determine whether repetition
If you want feedback to repeat the prompts or step out of the limit, you can improve the following if statement
if (($.inarray (_txt,_arr) ==-1) && (_arr.length<_maxcount)) {
_arr.push (_txt);
_inputval=_arr.join (Iset.separator);
_input.val (_inputval);
}
});
Close button
Iset.close.click (function () {
Iset.drop.hide ();
});
}
});
}) (JQuery);
Original published in Mr.think blog: http://mrthink.net/jquery-plugin-iselecttags/
