Implement a Google + Circle selection feature plug-in (keyboard event support) based on jquery

Source: Internet
Author: User

Specific principles and calls are not detailed, you can see code comments and Demo demo (Demo Mod.udata.js has a Chinese pinyin method, it is not a part of the plug-in, but for Plug-ins to provide a phonetic search function).

The code is as follows Copy Code

;(function ($) {


/*


* Based on jquery implementation similar to the Google + Circle selection feature plug-in (keyboard event support) @Mr.


*/


$.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;


If no list data is interrupted


if (iset.data.length==0) {return false}


Initializing the Drop-down list


var tpl= ' <div class= ' +iset.pullcls+ ' "><ul>";


var tplarr=[];


$.each (Iset.data,function (k,v) {


Tplarr.push (' <li data-mid= ' + v.mid+ ' "data-name=" ' + v.filtername.touppercase () + ' "class=" hook_visible hook_ ' + V.mid+ ' > ' + v.name+ ' </li> ');


});


Tpl=tpl+tplarr.join (') + ' </ul></div> ';


if (pull==null) {


Main.append (TPL);


}


pull=$ ('. ') +iset.pullcls,main);


_h=pull.find (' Li '). Outerheight (True);


Pull.width (Main.width ()-2);


Action function


var action={


Init:function () {


List mouse across


Pull.delegate (' li.hook_visible ', ' mouseover ', function () {


$ (this). addclass (CLS). Siblings (). Removeclass (CLS);


});


SELECT list


Pull.delegate (' li.hook_visible ', ' click ', function () {


Action.choose ($ (this));


});


Click on the pop-up list


Chose.click (function () {


Action.show ();


});


Remove selected


Chose.delegate ('. ') +iset.removeel, ' click ', function () {


Action.undock ($ (this));


});


},


Move:function (dir) {


Move up and down-on:: Str=up | Under:: 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);


Follow scrolling when moving


if (Item.size () >_l) {


Roll down


if (dir== ' down ') {


Pull.scrolltop ((index+2-_l) *_h);


}


Roll up and move.


if (dir== ' up ') {


Pull.scrolltop ((index-1) *_h);


}


}


},


Choose:function (EL) {


List selection


var mid=el.attr (' Data-mid ');


var name=el.text ();


Tips.before (' <div class= "' +iset.selitemcls+ '" ><span> ' +name+ ' </span><a href= "javascript:;" class= "' +iset.removeel+ '" data-mid= "' +mid+ '" >x</a></div> ");


Input.focus ();


El.hide (). Removeclass (' hook_visible ');


Return check list ID


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_visible ');


This.upstyle ();


},


Show:function () {


Show 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 List


Pull.slideup (100);


$ (SELF). blur ();


Tips.show ();


Input.removeclass (ISET.INPUTWCLS);


},


Upstyle:function (type) {


Update Drop-down list Style-when the line is selected--


var len=pull.find (' li.hook_visible '). Size ();


if (type== ' match ') {


Len=pull.find (' li:visible '). 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-Pinyin selection requires plugin support


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 (' <li class= ' ' +iset.norescls+ ' "> No selectable list </li> ')


}


This.upstyle (' match ');


},


Blur:function (str) {


Non-select area click Hide


Pull.find (' li.hook_visible '). each (function () {


var name=$ (this). text ();


if (name = = str) {


Action.choose ($ (this));


}


});


Input.val (");


}


}


Action.init ();


Keyboard control-binding input form


$ (this). On ({


Keyboard bouncing up


' KeyUp change ': function () {


var val= $.trim (Input.val ());


Action.match (Val);


},


Lose focus


' Blur ': function () {


var val= $.trim (Input.val ());


Action.blur (Val);


},


Keyboard Press-captures keyboard values to perform corresponding events


/*


8-delete;


27-esc;


38-up;


40-down;


9-tab;


13-enter


*/


' KeyDown ': 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 (' Down ')


Break


Case 9:


Case 13:


E.preventdefault ();


Action.choose (Pull.find ('. ') +CLS));


Break


Default


$.noop ();


}


}


});


Click the non current area to hide the pop-up layer


Main.click (function (e) {


E.stoppropagation ();


});


$ (document). Click (function () {


Action.hide ();


});


}


$.fn.ichoose.defaults = {


/*


Data: Incoming value, can be real-time Ajax biography, the demo is a JSON value, the specific format can refer to the $.map (...) in Mod.udatas.js.


Limit: Number of bars per display, other scrolling display


Chomain: Load Zone ID


PULLCLS: Class of Pop-up list


CHOCLS: Peripheral Class of selected list


SELITEMCLS: A single element class that has been selected


Removeel: Deletes the element's class


SELCLS: List of highlighted class


The class of Inputwcls:input


Tips: Default hint value element hook


NORESCLS: CLS with no results in list


Chsids: The ID value of the list has been selected and passed to the backend. (This value can also be used to return the value from the plug-in using the 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);

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.