At.js 是一个自动完成库,用来实现自动完成提示,表情等。
你可以监听任何字符,而不仅仅是@
符号,可为不同的字符设置多个监听器以实现不同的行为和数据。
监听器事件可以绑定到多个 Inputors(输入器) 。除了鼠标之外还支持键盘控制。您可以用一组可配置的回调来使用自定义数据处理程序和模板渲染。
引用JS文件
<link rel="stylesheet" href="/cdn/at/jquery.atwho.min.css">
<script src="/cdn/at/jquery.atwho.min.js"></script>
<script src="/cdn/at/jquery.caret.min.js"></script>
通过ID调用
$('#inputor').atwho({
at: "@",
data:['index', 'where', 'Anne']
})
当文本框中输入@号时,会被提示data设置的数据列表。
<span style="color:#FF0000;">注意:此时文本框中不能有内容,如果有的话输入@号就不会有提示,需要进行其他配置选项解决。</span>
其它配置参考如下:
$.fn.atwho[“default”] = {
at: void 0,
alias: void 0,
data: null,
displayTpl: “<li>${name}</li>”,
insertTpl: “${atwho-at}${name}”,
callbacks: DEFAULT_CALLBACKS,
searchKey: “name”,
suffix: “ “,
hideWithoutSuffix: false,
startWithSpace: true,
highlightFirst: true,
limit: 5,
maxLen: 20,
minLen: 0,
displayTimeout: 300,
delay: null,
spaceSelectsMatch: false,
tabSelectsMatch: true,
editableAtwhoQueryAttrs: {},
scrollDuration: 150,
suspendOnComposing: true
};
<span style="color:#FF0000;">startWithSpace:</span>关键字符前是否为空,true: 文本框的内容为空,输入关键字符才有效。false:不管文本有无内容,只要输入关键字符就提示。
<span style="color:#FF0000;">suffix:</span>当选中data设置的数据后,文本框内容加的后缀字符。默认的为一个空格。设置“”为不用后缀。
<span style="color:#FF0000;">limit:</span>显示提示列表的数量。