The effect used in recent projects is similar to the Circle adding function of Google +. The plug-ins in this article are about 8 characters encapsulated, and many functions are written based on the actual needs of the project. If you want to use it, you can modify it according to your own situation.
The detailed principle and call are not detailed. You can view the code comments and DEMO (mod in the DEMO. udata. in js, there is a Chinese character-to-pinyin method, which is not part of the plug-in, but provides the pinyin search function for the plug-in ).
The Code is as follows:
; (Function ($ ){
/*
* JQuery-based implementation of plug-ins similar to Google + circle selection function (supporting Keyboard Events) @ Mr. Think (http://mrthink.net /)
*/
$. Fn. iChoose = function (options ){
Var SELF = this;
Var iset = $. extend ({}, $. fn. iChoose. defaults, options );
Var _ h, pull = null;
Var main = $ (iset. choMain );
Var chose = $ (iset. choCls, main );
Var input = $ (SELF );
Var tips = $ (iset. tips, main );
Var cls = iset. selCls;
Var ids = $ (iset. chsIds );
Var _ l = iset. limit;
// Interrupted if no list data exists
If (iset. data. length = 0) {return false}
// Initialization drop-down list
Var tpl ='
';
Var tplArr = [];
$. Each (iset. data, function (k, v ){
TplArr. push ('
- '+ V. name +'
');
});
Tpl = tpl + tplArr. join ('') +'
';
If (pull = null ){
Main. append (tpl );
}
Pull = $ ('.' + iset. pullCls, main );
_ H = pull. find ('lil'). outerHeight (true );
Pull. width (main. width ()-2 );
// Operation function
Var Action = {
Init: function (){
// The list is displayed
Pull. delegate ('Li. hook_visible ', 'mouseover', function (){
$ (This). addClass (cls). siblings (). removeClass (cls );
});
// Select the list
Pull. delegate ('Li. hook_visible ', 'click', function (){
Action. choose ($ (this ));
});
// Click the pop-up list
Chose. click (function (){
Action. show ();
});
// Remove the selected
Chose. delegate ('.' + iset. removeEl, 'click', function (){
Action. undock ($ (this ));
});
},
Move: function (dir ){
// Move up/down-up: str = up | bottom: step = down;
Var index;
Var item = pull. find ('Li. hook_visible '). filter (': visible ');
Var cur = item. filter ('.' + cls );
Cur. size () = 0? Index =-1: index = item. index (cur );
Item. eq (dir = 'up '? (Index <1? 0: index-1): index + 1). addClass (cls). siblings (). removeClass (cls );
// Scroll when moving
If (item. size ()> _ l ){
// Scroll down
If (dir = 'low '){
Pull. scrollTop (index + 2-_ l) * _ h );
}
// Scroll up
If (dir = 'up '){
Pull. scrollTop (index-1) * _ h );
}
}
},
Choose: function (el ){
// Select a list
Var mid = el. attr ('data-mid ');
Var name = el. text ();
Tips. before ('
'+ Name +' x
');
Input. focus ();
El. hide (). removeClass ('hook _ visable ');
// Return the id of the selected list
Ids. val () = ''? Ids. val (mid): ids. val (ids. val () + ',' + mid );
Pull. find ('Li. hook_visible: first '). addClass (cls). siblings (). removeClass (cls );
This. upstyle ();
},
Undock: function (el ){
// Delete selected
Var mid = el. attr ('data-mid ');
Var idsArr = ids. val (). split (',');
Input. focus ();
El. parent (). remove ();
IdsArr = $. grep (idsArr, function (v, k ){
Return v! = Mid;
});
Ids. val (idsArr. join (','));
Pull. find ('Li. hook _ '+ mid). show (). addClass ('hook _ visable ');
This. upstyle ();
},
Show: function (){
// Display the list
Pull. slideDown (100, function () {Action. match ('')});
Pull. find ('Li. hook_visible: first '). addClass (cls). siblings (). removeClass (cls );
$ (SELF). focus ();
Tips. hide ();
Input. addClass (iset. inputWCls );
},
Hide: function (){
// Hide the list
Pull. slideUp (100 );
$ (SELF). blur ();
Tips. show ();
Input. removeClass (iset. inputWCls );
},
Upstyle: function (type ){
// Update the style of the drop-down list-when a row is selected --
Var len = pull. find ('Li. hook_visible '). size ();
If (type = 'match '){
Len = pull. find ('li: visable'). size ();
}
If (len <_ l ){
Pull. height (_ h * len );
If (len = 0 ){
This. hide ();
}
} Else {
Pull. height (_ h * _ l );
}
Pull.css ('top', chose. outerHeight ());
},
Match: function (str ){
// Filter selection-support for the ins required for pinyin Selection
Var visible = pull. find ('Li. hook_visible ');
Visible. each (function (){
Var name = $ (this). attr ('data-name ');
Name. match (str. toUpperCase ())! = Null? $ (This). show (): $ (this). hide ();
});
If (visible. size () = 0 & $ ('.' + iset. noResCls). size () = 0 ){
Pull. find ('li: first '). before ('
No available list')
}
This. upstyle ('match ');
},
Blur: function (str ){
// Click hide in a non-selected area
Pull. find ('Li. hook_visible '). each (function (){
Var name = $ (this). text ();
If (name = str ){
Action. choose ($ (this ));
}
});
Input. val ('');
}
}
Action. init ();
// Keyboard control-bind the input form
$ (This). on ({
// The keyboard pops up.
'Keyup change': function (){
Var val = $. trim (input. val ());
Action. match (val );
},
// Lose focus
'Blur': function (){
Var val = $. trim (input. val ());
Action. blur (val );
},
// Press the keyboard to capture the keyboard value to execute the corresponding event
/*
8-delete;
27-esc;
38-up;
40-down;
9-tab;
13-enter
*/
'Keylow': function (e ){
Switch (e. keyCode ){
Case 8:
If ($. trim (input. val () = ''){
E. preventDefault ();
Var last = chose. find ('.' + iset. removeEl + ': last ');
If (last. size ()> 0 ){
Action. undock (last );
}
}
Break;
Case 27:
E. preventDefault ();
Action. hide ();
Break;
Case 38:
E. preventDefault ();
Action. move ('up ');
Break;
Case 40:
E. preventDefault ();
Action. move ('low ')
Break;
Case 9:
Case 13:
E. preventDefault ();
Action. choose (pull. find ('.' + cls ));
Break;
Default:
$. Noop ();
}
}
});
// Click the hidden pop-up layer in the non-current Area
Main. click (function (e ){
E. stopPropagation ();
});
$ (Document). click (function (){
Action. hide ();
});
}
$. Fn. iChoose. defaults = {
/*
Data: The input value can be uploaded through ajax in real time. The demo shows the json value. For details about the format, see $. map (...) in mod. udatas. js (...)
Limit: the number of items displayed each time. Other items are displayed in scrolling mode.
ChoMain: Load Region id
PullCls: class in the pop-up list
ChoCls: Peripheral class selected from the list
SelItemCls: Selected single element class
RemoveEl: deletes the class of an element.
SelCls: list highlighted class
InputWCls: class of input
Tips: Default Value element hook
NoResCls: cls when no result is found in the list
ChsIds: id value of the selected list, which is passed to the backend. (This value can also be returned from the plug-in using a callback function)
*/
Data: UDatas,
Limit: 5,
ChoMain: '# ichoosemain ',
PullCls: 'icm-list ',
ChoCls: '. icm-box ',
SelItemCls: 'icm-item ',
RemoveEl: 'icm-delete ',
SelCls: 'selected ',
InputWCls: 'icm-input-W ',
Tips: '. icm-cur-txt ',
NoResCls: 'hook _ noresult ',
ChsIds: '# iChooseIds'
}
}) (JQuery );
