具体原理与调用不详述，可看代码注释及demo演示（演示中mod.udata.js里有一个汉字转拼音方法，它并不是插件的一部分，但为插件提供了拼音搜索的功能）。
复制代码 代码如下:
;(function ($) {
    /*
     * 基于jquery实现类似google+圈子选择功能插件（支持键盘事件）@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;
        //若无列表数据则中断
        if(iset.data.length==0){return false}
        //初始化下拉列表
        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('li').outerheight(true);
        pull.width(main.width()-2);
        //操作函数
        var action={
            init:function(){
                //列表鼠标划过
                pull.delegate('li.hook_visible','mouseover',function(){
                    $(this).addclass(cls).siblings().removeclass(cls);
                });
                //选择列表
                pull.delegate('li.hook_visible','click',function(){
                    action.choose($(this));
                });
                //点击弹出列表
                chose.click(function(){
                    action.show();
                });
                //移除已选择
                chose.delegate('.'+iset.removeel,'click',function(){
                    action.undock($(this));
                });
            },
            move: function(dir) {
                //上下移动 - 上::str=up | 下::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                //移动时跟随滚动
                if(item.size()>_l){
                    //下翻滚动
                    if(dir=='down'){
                        pull.scrolltop((index+2-_l)*_h);
                    }
                    //上翻滚动
                    if(dir=='up'){
                        pull.scrolltop((index-1)*_h);
                    }
                }
            },
            choose:function(el){
                //列表选择
                var mid=el.attr('data-mid');
                var name=el.text();
                tips.before(''+name+'x
');
                input.focus();
                el.hide().removeclass('hook_visible');
                //返回选中列表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){
                //删除已选
                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(){
                //显示列表
                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(){
                //隐藏列表
                pull.slideup(100);
                $(self).blur();
                tips.show();
                input.removeclass(iset.inputwcls);
            },
            upstyle:function(type){
                //更新下拉列表样式 - 当已选换行时 --
                var len=pull.find('li.hook_visible').size();
                if(type=='match'){
                    len=pull.find('li:visible').size();
                }
                if(len                    pull.height(_h*len);
                    if(len==0){
                        this.hide();
                    }
                }else{
                    pull.height(_h*_l);
                }
                pull.css('top',chose.outerheight());
            },
            match:function(str){
                //过滤选择 - 拼音选择须插件支持
                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('暂无可选择列表')
                }
                this.upstyle('match');
            },
            blur:function(str){
                //非选择区域点击隐藏
                pull.find('li.hook_visible').each(function(){
                    var name=$(this).text();
                    if(name == str){
                        action.choose($(this));
                    }
                });
                input.val('');
            }
        }
        action.init();
        //键盘控制 - 绑定输入表单
        $(this).on({
            //键盘弹起
            'keyup change':function(){
                var val= $.trim(input.val());
                action.match(val);
            },
            //失去焦点
            'blur':function(){
                var val= $.trim(input.val());
                action.blur(val);
            },
            //键盘按下 -- 捕获键盘值，以执行对应事件
            /*
            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();
                }
            }
        });
        //点击非当前区域隐藏弹出层
        main.click(function(e){
            e.stoppropagation();
        });
        $(document).click(function(){
           action.hide();
        });
    }
    $.fn.ichoose.defaults = {
        /*
        data:传入值，可以实时ajax传上，演示中是json值，具体格式可参考mod.udatas.js中的$.map(...)
        limit:每次显示的条数，其他滚动显示
        chomain:载入区域id
        pullcls:弹出列表的class
        chocls:已选择列表的外围class
        selitemcls:已选择的单个元素class
        removeel:删除元素的class
        selcls:列表高亮的class
        inputwcls:input的class
        tips:默认提示值元素钩子
        norescls:列表中无结果时的cls
        chsids:已选择列表的id值，传给后端用的。（此值亦可用回调函数把值从插件中回传出来）
         */
        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);