Javascript 中心建议输入覆盖

我想创建一个类似于谷歌的搜索栏，在这里，一个建议的搜索将在您当前的输入行中显示一个搜索建议

我可以通过在第一个元素后面放置一个位置类似的输入元素，并提供禁用和着色的字体颜色属性来实现这一点。然后，我可以主动解析活动输入中的字符串，并编辑其后面的禁用输入

问题是我当前的搜索栏居中，这将导致任何建议的文本与活动输入不对齐。如何调整建议输入，使其与主动输入保持一致

更新：

我意识到我急于把这篇文章发出去，这使得我的意图非常不明确。我为任何误解和为回答这个写得很差的问题所做的努力道歉

无论如何，我已经创建了一个建议预览，显示在键入的文本后面。当文本在输入条的中间对齐时，这会起作用。

$suggestion=$（“#suggestion”）；
$action=$（“#action”）.focus（）；
$action.on（“keyup”，function（））{
var text=$action.val（）；
if（text==“”）$suggestion.val（“”）；
else$suggestion.val（文本+建议）；
});
$action.on（“模糊”，函数（）{
$suggestion.val（“”）；
});
正文{
保证金：0；
填充：0；
}
输入{
位置：绝对位置；
左：50%；
最高：50%；
转化：translateX（-50%）translateY（-50%）；
}
#暗示{
背景色：#fff；
颜色：#777；
}
#行动{
背景色：透明；
}


$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$（“#标记”）.autocomplete({
资料来源：availableTags
});
} );
*{
字体系列：“arial”；
字体大小：12px；
}
#标签{
填充物：5px；
宽度：200px；
}
.包装纸{
浮动：左；
保证金：0px自动；
左：150px；
顶部：100px；
位置：绝对位置；
}

请查看并提供一个。@BenjaminBrownlee您能告诉我您的第一个问题吗，覆盖文本似乎不正确，当光标聚焦在文本框上时它不会隐藏，对吗？我可以在以后使用这些功能。当输入文本对齐居中时，我更担心文本对齐。@BenjaminBrownlee请让我知道它是否有用。您确定知道“按键”事件没有捕获
退格
？对不起，这不是我要找的建议样式。然后您可以添加您的具体要求吗。我会帮你的。