tokeninput—jquery输入提示自动完成插件

发布于,归属于jquery插件13个座位已被强势霸占! 共有757人围观    

tokeninput

点此下载

插件简介:

英文说明:http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/

        类似google搜索的自动完成的功能,但UI有所增强。内含二个皮肤,其中个人比较推崇facebook的那个样式。大家可以看截图和演示
目前这个插件完美支持英文,但在中文输入的有bug,就是你输入完中文后,退删除一个字符,才会触发ajax事件。之前有好几个朋友向我询问解决方案。
现在已经解决这一个问题,其实只要把keydown换为keyup即可。中文示例与修改后的源代码请看压缩包

插件使用说明:

第一步:引进JQ库和插件JS文件,还有CSS文件

  1. <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
  2. <script src="jquery.tokeninput.js" type="text/javascript"></script>
  3. <link href="token-input-facebook.css" rel="stylesheet" type="text/css" />
  4. <link href="token-input.css" rel="stylesheet" type="text/css" />

其中的token-input-facebook.css,就是我所说的facebook样式。

第二步:初始化插件

  1. $("#tokenize").tokenInput("./test.php", {
  2.             hintText: "Type in the names of your favorite TV shows",
  3.             noResultsText: "No results",
  4.             searchingText: "Searching..."
  5.         });

第三步:服务器端编程(这里使用php)

关键点说明:插件会向服务器端传输查询字段q,使用的是get方法。所以服务器端通过截取q值,来提取数据库的数据,php中:
$_GET['q']。最后返回的必须是json数据结构:

  1. [{"id":"856","name":"House"},
  2.  {"id":"1035","name":"Desperate Housewives"},
  3.  {"id":"1048","name":"Dollhouse"},
  4.  {"id":"1113","name":"Full House"}
  5. ]

完毕!有问题的请在本文章下留言,我会竭诚为你回答!

(如果您喜欢这篇教程,可以通过支付宝打赏我们1元哦,拜谢!)

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

13个座位已被强势霸占!

  1. fanyuan

    已加你连接,希望回连,谢谢

  2. ellison

    不好意思,请问你加了吗

  3. 64595711

    初始化已选如何初始化

  4. RIA之家

    $(“#tokenize”).tokenInput(“./test.php”, {
    hintText: “Type in the names of your favorite TV shows”,
    noResultsText: “No results”,
    searchingText: “Searching…”
    });

    这样写初始化函数就行了。最关键的是要写上服务器端url地址

  5. RIA之家

    还有问题,可以联系我QQ:24414976

  6. amanda

    QQ号码写错了呢,差点加错了呢

  7. G.N.R.S.U

    建议把你的share插件换成jiathis这个我也是刚刚发现的,它比addthis更中国化!

    明河共影回复于 2009年12月18日 5:18

    谢谢提醒,实际上我都不喜欢这些分享按钮,因为不是有加版权标示,就是要经过分享网站后再跳转,让人不爽。打算自己写个

  8. 咖啡兔

    博主的博客不错,看了我们的方向是相同的……
    我的博客:http://www.wsria.cn
    也是阐释RIA的东西,呵呵
    留个脚印

  9. genobili

    这东西正在用,不过我要初始化是一个大问题?有解决方案没?

  10. luol17

    你好!博主,这几天在看 tokeninput 的实现, 发现ie下有bug。
    在官方demo的最后一个例子中(下拉选项中有图片的那个),在ie下根本不出来。 还有就是ie下中文文字会乱码。
    请教一下怎么解决
    还有就是有没有更好的类似的插件(目前我发现这个挺不错)
    谢谢

    luol17回复于 2011年12月30日 5:26

    @luol17, 补充一下

    就是输入中文的时候,比如输入“五”的时候 我输入w字母 时,不会有提示显示出来,请问怎么解决

    明河回复于 2011年12月30日 8:08

    输入中文的确有很大问题,解决方法是加延迟。需要改源码,在keyup内加些延迟时间。