当前位置:  开发笔记 > 编程语言 > 正文

Facebook风格的JQuery自动完成插件

如何解决《Facebook风格的JQuery自动完成插件》经验,为你挑选了3个好方法。

我是一个插件,像facebook一样做自动完成,你可以选择多个项目 - 类似于标记stackoverflow问题的方式.

以下是我遇到的一对情侣:

http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete

http://www.emposha.com/javascript/fcbkcomplete.html

https://github.com/loopj/jquery-tokeninput

你试过这些吗?它们易于实现和定制吗?



1> dkarzon..:

https://github.com/loopj/jquery-tokeninput

我只是去了这一个,使用asp.net页面输出JSON(来自搜索参数)真的很容易实现然后只需几行Javascript你需要创建它(和设置)

$(document).ready(function() {
        $("#Users").tokenInput("../Services/Job/UnassignedUsers.aspx?p=<%= projectID %>&j=<%= jobID %>", {
        hintText: "Begin typing the user name of the person you wish to assign.",
        noResultsText: "No results",
        searchingText: "Searching..."
    });
});


如果你使用ASP.Net,你可以使用我的openourse项目ASPTokenInput,它将服务器端功能添加到jquery-tokeninput插件https://github.com/harindaka/ASPTokenInput/wiki

2> 小智..:

这一个非常好!https://github.com/wuyuntao/jquery-autosuggest/

如何使用它

显然,您需要确保已在页面中加载了最新的jQuery库(至少1.3).之后它非常简单,只需将以下代码添加到页面中(确保将代码包装在jQuery的ready函数中):

$(function(){
    $("input[type=text]").autoSuggest(data);
});

上面的代码行将AutoSuggest应用于input 页面上的所有文本类型元素.每个人都将使用相同的数据集.如果您希望页面上有多个使用不同数据集的AutoSuggest字段,请确保单独选择它们.像这样:

$(function(){
    $("div.someClass input").autoSuggest(data);
    $("#someID input").autoSuggest(other_data);
});

执行上述操作将允许您传入不同的选项和不同的数据集.下面是将AutoSuggest与数据对象和其他各种选项一起使用的示例:

var data = {items: [
    {value: "21", name: "Mick Jagger"},
    {value: "43", name: "Johnny Storm"},
    {value: "46", name: "Richard Hatch"},
    {value: "54", name: "Kelly Slater"},
    {value: "55", name: "Rudy Hamilton"},
    {value: "79", name: "Michael Jordan"}
]};
$("input[type=text]").autoSuggest(data.items, {selectedItemProp: "name", searchObjProps: "name"});


功能丰富,但大量的错误.最后,我创建了自己的:http://the.deerchao.net/TagEditor

3> philfreo..:

这是我发现的,没有特别的顺序:

Selectize.js

jQuery Tokeninput - GitHub

选择二

TextboxList

Tag-it - GitHub

TextExt

FCBKcomplete - GitHub - 演示

jQuery Facebook自动完成

jquery-autosuggest - drewwilson演示

松树标签

tagedit

TAG-IT

jQuery标签输入

标签

jquery.token场


哪个是前2或3?
推荐阅读
手机用户2402852307
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有