注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

一个类似于facebook的input框的JQuery插件  

2010-12-19 16:13:21|  分类: Jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

插件地址: http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/

插件官方的Demo地址: http://loopj.com/tokeninput/demo.html

 

该插件有一个bug(这是我的看法)如图

  一个类似于facebook的input框的JQuery插件 - zhenghaoju700 - zhenghaoju700 的博客

当输入相同选项时,相同的token不应该重复出现在input框中

 

我对该插件进行了修改 使的输入相同信息时,不能重复显示

 

添加了两个函数get_all_token_names()  , find_token_by_name()

修改了add_token()  当添加相同的选项时 高亮已经有的token 保证token不重复

    // get all token_names
    function get_all_token_names(){
        var tokens = [];
        token_list.children("li").children("p").each(function(){
            tokens.push($(this).html());
        });
        return tokens;
    }
    // find token by name
    function find_token_by_name(token_name){
        var this_token = null;
        token_list.children("li").each(function(){  
            if($(this).children("p").html() == token_name){
                this_token = $(this);
            }
        });
        return this_token;
    }
    // Add a token to the token list based on user input
    function add_token (item) {
        var token_names = get_all_token_names();
        var li_data = $.data(item.get(0), "tokeninput");
        var this_token = null;
        if($.inArray(li_data.name, token_names) == -1){
            this_token = insert_token(li_data.id, li_data.name);
        }else{
            this_token = find_token_by_name(li_data.name);
               select_token(this_token);
        }
        // Clear input box and make sure it keeps focus
        input_box
            .val("")
            .focus();

        // Don't show the help dropdown, they've got the idea
        hide_dropdown();

        // Save this token id
        var id_string = li_data.id + ","
        hidden_input.val(hidden_input.val() + id_string);
        
        token_count++;
        
        if(settings.tokenLimit != null && settings.tokenLimit >= token_count) {
            input_box.hide();
            hide_dropdown();
        }
    }

修改后的结果 如图

  一个类似于facebook的input框的JQuery插件 - zhenghaoju700 - zhenghaoju700 的博客
再次选择house 如图 高亮hosue 保证唯一性

  一个类似于facebook的input框的JQuery插件 - zhenghaoju700 - zhenghaoju700 的博客

 

修改后的插件下载地址 http://download.csdn.net/source/2921605

其实JQuery UI的自动补全插件 已经有这个功能 只是需要加入相应的样式就可以有同样的显示效果

感谢作者 James Smith (http://loopj.com) 使用的是GPL和MIT 双License

 

 补充JQuery的自动补全插件的多选功能

http://jqueryui.com/demos/autocomplete/#multiple

如图

  一个类似于facebook的input框的JQuery插件 - zhenghaoju700 - zhenghaoju700 的博客

但是 这两者的实现方式是完全不同的

  评论这张
 
阅读(146)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017