input - 直接在输入字段内自动完成

Question

我想在我的网站上添加一个自动完成系统，我搜索了一段时间，但没有找到我要找的东西，这很难解释。

我想要一个直接在其内部自动完成输入的系统。谷歌使用“通用”自动完成加上这个，但似乎没有其他人做过这样的事情!

一些简单而合乎逻辑的事情......如果不存在，怎么可能做这样的事情？

这是谷歌系统:

google autocomplete inside input

Answer 1

解决方案可能是在输入框上方放置一个带有灰色文本的 div，以显示第一个自动完成选项与文本框中当前文本之间的差异。

按下键 - 任何常见的自动完成都会生成匹配项目的列表。
取第一个并在他身上设置一个选定的样式(通过使用 .addClass())，
将文本框内容与第一项内容之间的差异放在灰色div上。

我发现了一个有趣的扩展，它默认选择第一个选项:

http://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.selectFirst.js

$( el ).autocomplete({
      selectFirst: true
});

您可以使用它并对其进行更改以满足您的需要。例如，您可以将以下代码添加到“jquery.ui.autocomplete.selectFirst.js”文件中:

if (menu.element.children().first().length == 1)
{
    $("#autocomplete").val(menu.element.children().first()[0].childNodes[0].childNodes[0].data);
}

它不仅会选择，还会实际将其插入文本框( 注意: 我只是举了你可以做什么的例子，这个代码本身是不够的)。