中心建议输入叠加

Question

我想创建一个类似于Google的搜索栏，其中建议的搜索会在您当前的输入行中查看搜索建议。

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

问题是我当前的搜索栏居中，这将导致任何建议的文本与活动输入错位。有关调整建议输入以与活动输入一致的想法吗？

更新

我意识到我非常急于将这个发布，这使我的意图非常不清楚。对于回答这个写得不好的问题的任何误解和努力，我深表歉意。

无论如何，我已经创建了一个建议预览，显示了键入的文本。当文本在输入栏的中间对齐时，这种方法有效。

$suggestion = $("#suggestion");
$action = $("#action").focus();

$action.on("keyup", function() {
  var text = $action.val();
  
  if(text == "") $suggestion.val("");
  else $suggestion.val(text + " suggestion");
});
$action.on("blur", function() {
  $suggestion.val("");
});

body {
  margin: 0;
  padding: 0;
}

input {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#suggestion {
  background-color: #fff;
  color: #777;
}

#action {
  background-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="suggestion" disabled>
<input id="action">

但是，如果您将文本置于输入栏的中心位置，则所有字符都会变得不对齐，如下面的演示所示：

$suggestion = $("#suggestion");
$action = $("#action").focus();

$action.on("keyup", function() {
  var text = $action.val();
  
  if(text == "") $suggestion.val("");
  else $suggestion.val(text + " suggestion");
});
$action.on("blur", function() {
  $suggestion.val("");
});

body {
  margin: 0;
  padding: 0;
}

input {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}

#suggestion {
  background-color: #fff;
  color: #777;
}

#action {
  background-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="suggestion" disabled>
<input id="action">

我正在寻找一种方法来保持输入文本在中间对齐，同时仍然能够动态地对齐建议视图后面的建议文本。

Answer 1

＆＃13;

＆＃13;

$( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );

＆＃13;

*{
    font-family: "arial";
    font-size: 12px;
}

#tags{
  padding:5px;
  width:200px;
}

.wrapper {
    float: left;
    margin: 0px auto;
    left: 150px;
    top: 100px;
    position: absolute;
}

＆＃13;

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="wrapper">
    <div class="ui-widget">
        <input id="tags" placeholder="Search by language" />
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;