自动完成文本的中间(如谷歌加) [英] autocomplete in middle of text (like Google Plus)
问题描述
有吨选择那里做自动完成。大多数人似乎对正在输入前几个字母的工作。
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!)
有没有人共享code做这样的事情?
Has anybody shared code to do this sort of thing?
没有任何人有任何指针试图实现这种玩具的版本(例如jQuery中)?
Does anybody have any pointers for trying to implement a toy version of this (e.g. in jQuery)?
推荐答案
这是可能的 jQueryUI的的自动完成构件。具体来说,可以适应这个演示,以满足您的要求。这里有一个例子:
This is possible with jQueryUI's autocomplete widget. Specifically, you can adapt this demo to satisfy your requirement. Here's an example:
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/
让我知道如果你需要任何更多的信息(比如如何使它与远程数据源工作)。
Let me know if you need any more information (such as how to make it work with a remote datasource).
更新:下面是使用远程数据源(计算器的API)的例子: http://jsfiddle.net/LHNky / 。它还包括自动完成建议自定义显示。
Update: Here's an example using a remote datasource (StackOverflow's API): http://jsfiddle.net/LHNky/. It also includes custom display of autocomplete suggestions.
这篇关于自动完成文本的中间(如谷歌加)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!