jQuery.At

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>显示提示列表的数量。

转载请注明出处：吖Go博客 » jQuery.At