在文本中间自动完成（例如Google Plus）
有很多选择可以做自动完成。 他们中的大多数似乎都在输入的前几个字母上工作。
在Google Plus中，自动填充选项在输入@后很快就会下降，无论它在表单字段中出现在何处，并使用@后面的字母来指导自动完成。 （它看起来也很不错！）
有没有人共享代码来做这种事情？
有没有人有任何指针试图实现这个玩具版本（例如在jQuery中）？
这可以通过jQueryUI的自动完成小部件实现 。 具体来说，您可以调整此演示以满足您的要求。 这是一个例子：
function split(val) { return val.split(/@\s*/); } function extractLast(term) { return split(term).pop(); } var availableTags = [ ... ]; // Your local data source. $("#tags") // don't navigate away from the field on tab when selecting an item .bind("keydown", function(event) { if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) { event.preventDefault(); } }).autocomplete({ minLength: 0, source: function(request, response) { var term = request.term, results = []; if (term.indexOf("@") >= 0) { term = extractLast(request.term); if (term.length > 0) { results = $.ui.autocomplete.filter( availableTags, term); } } response(results); }, focus: function() { // prevent value inserted on focus return false; }, select: function(event, ui) { var terms = split(this.value); // remove the current input terms.pop(); // add the selected item terms.push(ui.item.value); // add placeholder to get the comma-and-space at the end terms.push(""); this.value = terms.join(""); return false; } });
它在这里工作： http ： //jsfiddle.net/UdUrk/
如果您需要更多信息（例如如何使其与远程数据源一起使用），请告诉我。
更新：这是使用远程数据源（StackOverflow的API）的示例： http ： //jsfiddle.net/LHNky/ 。 它还包括自动填充建议的自定义显示。
我写了一个基于jQuery UI自动完成function的jQuery插件。 这是我的解决方案：
http://www.hawkee.com/snippet/9391/
你这样称呼它：
$('#inputbox').triggeredAutocomplete({ hidden: '#hidden_inputbox', source: "/search.php", trigger: "@" });
您可以使用自动完成搜索事件来检测文本中是否包含@。 如果它不是@那么只返回false并且自动完成将不起作用。
例如：$（“。selector”）。selfocomplete（{search：function（event，ui）{…}}）;
我为此编写了一个bootstrap插件。 无论@在表单字段中出现在哪里，它都可以工作。 它适用于ContentEditable div而不是文本区域： http ： //sandglaz.github.com/bootstrap-tagautocomplete/
为了详细阐述Andrew Whittaker的答案，jQuery UI Autocomplete的source选项用于指定一个数组，其中包含触发小部件后要在下拉列表中显示的项目。 它可以定义为这样一个数组，一个返回这样一个数组的函数，或一个生成这种数组的资源的URL。
如果将source定义为函数，则函数， request和response的参数可用于帮助组合其返回数组并分别将其提供给窗口小部件。 特别是您感兴趣的request ，因为它的成员， term包含调用该函数时附加小部件的输入元素的值。
看看我要去哪里？ 它非常简单，解析request.term用于感兴趣的@符号和光标之间的文本，并使用该文本创建要提供给窗口小部件的数组。 但是，您需要做一些工作（或使用一些现成的function）才能以跨浏览器兼容的方式可靠地定位光标。
如果您正在寻找提供您尝试模拟的function的现有插件，请查看Mentionator 。 它结构合理，易于理解，并且有很多评论，因此您应该毫不费力地理解如何采用我所描述的方法。 它也是你的真正维护:)。