jQuery仿微博@功能插件At.js

所属分类:其他-独立的部件,杂项

 39759  340  查看评论 (22)
分享到微信朋友圈
X
jQuery仿微博@功能插件At.js ie兼容10

使用方法

需要引入的样式和js包括

<link href="css/jquery.atwho.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/jquery.caret.js"></script>
<script src="js/jquery.atwho.js"></script>
$('#inputor').atwho({
    at: "@",
    data:['Peter', 'Tom', 'Anne']
})

1.可以监听任何字符,不仅仅只是’@‘,可以设置监听不同的字符和使用不同的数据。 

2.支持同时使用静态数据和动态数据(通过AJAX),静态数据会被优先使用,然后再用AJAX加载找不到的值。 

3.可以给多个文本框设置监听事件。 

4.内置缓存支持。

5.可以使用模板设置数据的显示格式。 

6.鼠标/键盘控制:Tab或Enter键选择,Up和Down键上下导航。 

7.支持输入搜索。

默认的参数:

$.fn.atwho["default"] = {
  at: void 0,
  alias: void 0,
  data: null,
  displayTpl: "<li>${name}</li>",//显示模板
  insertTpl: "${atwho-at}${name}",//插入模板
  headerTpl: null,
  callbacks: DEFAULT_CALLBACKS,
  searchKey: "name",
  suffix: void 0,
  hideWithoutSuffix: false,
  startWithSpace: true,//是否已空格开始
  highlightFirst: true,
  limit: 5,//默认只显示5条
  maxLen: 20,
  minLen: 0,
  displayTimeout: 300,
  delay: null,
  spaceSelectsMatch: false,
  tabSelectsMatch: true,
  editableAtwhoQueryAttrs: {},
  scrollDuration: 150,
  suspendOnComposing: true,
  lookUpOnClick: true
};


相关插件-独立的部件,杂项

jQuery自动定位当地天气预报

jQuery调用新浪天气,显示城市天气气温风向风级图标白天夜间
  独立的部件
 62284  438

CSS3开关切换按钮

多组超具创意的CSS3开关切换按钮
  独立的部件
 41415  499

jquer网页打印插件PrintArea.js

jquery实现页面打印可局部打印
  独立的部件
 70525  404

html5手势解锁插件H5lock.js

html5手势解锁插件H5lock.js详细注释
  独立的部件
 37813  368

讨论这个项目(22)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    qzuser 0
    2021/5/12 16:13:41
    苹果浏览器为什么输入后点击一下才会出现列表 回复
    中分痞子莫扎特 0
    2020/9/24 15:13:53
    这个怎么引入到vue项目中呢 回复
    xxs61 0
    2019/7/3 17:30:06
    请问,如何绑定到多个 输入框上呢
        自由0
        2019/12/23 15:24:38
        遍历不就完事了
    回复
    金戒指 0
    2018/9/13 16:52:45
    麻烦问下我用了这个插件,在本地是没有问题的,但是放到我们的服务器上面,可能跟我们的PHP模板报冲突了 ${name},解析出来是空的
        金戒指0
        2018/9/13 16:57:02
        主要是用了这个方法以后:${name}解析不出来,但是我们要传id,只能写这个方法,请问下这个怎么解决呢 Tpl: '<span data-id="${id}">@${name}</span>',
    回复
    Jesuer 0
    2018/4/11 16:52:43
    您好,callbacks回调不能自己定函数吗? 回复
    仰望星空 0
    2018/1/22 16:03:50
    各位大神好,小白向大家请教一下,如果使用如上代码@wahaha 但wahaha这个数据并不存在,我们要怎样改进上面的代码使其弹出提示(无匹配内容)呢? 回复
    ??高姿??? 0
    2018/1/8 13:24:57
    @后出来的选项框没有定位在@旁边怎么办 回复
    浮华梦一场 0
    2017/12/19 17:05:52

    wangEditor可以应用这个插件吗

    回复
    傲娇的霸波尔奔 0
    2017/9/18 15:22:48

    jquery引用2.0以下的版本,IE9以下版本也可以兼容

    回复
    艾莉卡yang 0
    2017/4/10 9:49:19

    怎么去掉&zwj;每选一个选项后面都会跟这个符号

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复