在文本中间自动完成(如 Google Plus)
有很多选项可用于自动完成。他们中的大多数似乎只针对输入的前几个字母。
在 Google Plus 中,输入 @
后,自动完成选项很快就会下降,无论它出现在表单字段中的哪个位置,并使用紧随 @
后面的字母来指导自动完成。 (它看起来也很不错!)
有没有人共享代码来做这类事情?
有没有人有任何尝试实现这个玩具版本的指示(例如在 jQuery 中)?
There are tons of options out there for doing autocompletion. Most of them seem to work on the first few letters that are typed.
In Google Plus, an autocomplete option drops down soon after typing @
, no matter where it occurs in the form field, and uses the letters immediately following @
to guide the autocomplete. (It also looks quite nice!)
Has anybody shared code to do this sort of thing?
Does anybody have any pointers for trying to implement a toy version of this (e.g. in jQuery)?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(5)
我编写了一个基于 jQuery UI 自动完成功能的 jQuery 插件。这是我的解决方案:
http://www.hawkee.com/snippet/9391/
像这样称呼它:
$('#inputbox').triggeredAutocomplete({
hidden: '#hidden_inputbox',
source: "/search.php",
trigger: "@"
});
我为此编写了一个引导插件。无论 @ 出现在表单字段中的哪个位置,它都有效。它适用于 ContentEditable div 而不是文本区域: http://sandglaz.github.com/bootstrap-tagautocomplete/< /a>
为了稍微解释一下 Andrew Whittaker 的答案,jQuery UI Autocomplete 的 source
选项用于指定一个数组,其中包含触发小部件后要在下拉列表中显示的项目。它可以被定义为这样的数组、返回这样的数组的函数或者生成这样的数组的资源的URL。
如果 source
被定义为函数,则函数的参数 request
和 response
可用于帮助组成其返回数组并提供分别到小部件。您尤其对 request
感兴趣,因为它的成员 term
包含调用函数时小部件所附加到的输入元素的值。
明白我要说的是什么吗?它非常简单,解析 request.term
以获得感兴趣的 @
符号和光标之间的文本,并使用该文本创建数组以提供给小部件。但是,您需要做一些工作(或使用一些现成的函数)才能以跨浏览器兼容的方式可靠地定位光标。
如果您正在寻找可提供您想要的功能的现有插件,请查看 Mentionator仿真。它结构良好、易于理解并且有大量注释,因此您应该可以轻松理解如何采用我所描述的方法。它也是由您真正维护的:)。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
这可以通过 jQueryUI 的自动完成小部件 实现。具体来说,您可以调整此演示来满足您的要求。这是一个例子:
它正在工作: http://jsfiddle.net/UdUrk/
让我知道如果您需要更多信息(例如如何使其与远程数据源一起使用)。
更新:以下是使用远程数据源(StackOverflow 的 API)的示例:http://jsfiddle.net /LHNky/。它还包括自动完成建议的自定义显示。
This is possible with jQueryUI's autocomplete widget. Specifically, you can adapt this demo to satisfy your requirement. Here's an example:
And here it is working: http://jsfiddle.net/UdUrk/
Let me know if you need any more information (such as how to make it work with a remote datasource).
Update: Here's an example using a remote datasource (StackOverflow's API): http://jsfiddle.net/LHNky/. It also includes custom display of autocomplete suggestions.