居中输入框的Google式搜索建议对齐问题求助

我懂你遇到的困扰——用两个重叠input做谷歌式搜索建议时，一旦设置text-align:center，输入文本和建议文本就会错位。这本质是因为两个input的内容长度不同，各自的居中基准是自身输入框，自然会出现偏移。下面给你两个可行的解决方案：

方案一：单个Input + 伪元素（更简洁优雅） #

放弃双input的思路，改用一个可输入的input，配合父元素的伪元素来显示搜索建议。这样所有文本的对齐基准都是同一个容器，从根源上避免错位问题。

代码示例： #

<div class="search-wrapper">
  <input id="action" type="text" placeholder="搜索...">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.search-wrapper {
  position: relative;
}
#action {
  text-align: center;
  padding: 8px 16px;
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 24px;
}
.search-wrapper:after {
  content: attr(data-suggestion);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 8px 16px;
  box-sizing: border-box;
  text-align: center;
  color: #777;
  pointer-events: none; /* 让点击穿透到下方的input */
  background-color: transparent;
  border-radius: 24px;
}

const $wrapper = $(".search-wrapper");
const $action = $("#action").focus();

$action.on("keyup", function() {
  const text = $(this).val();
  $wrapper.attr("data-suggestion", text ? `${text} suggestion` : "");
});

$action.on("blur", function() {
  $wrapper.attr("data-suggestion", "");
});

方案二：修复双Input的对齐逻辑 #

如果你坚持使用双input的方案，核心是要确保两个input的尺寸完全一致，让它们的文本对齐基准统一。修改后的代码如下：

代码示例： #

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

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.search-container {
  position: relative;
  width: 300px; /* 固定容器宽度，确保两个input尺寸完全一致 */
}
input {
  position: absolute;
  width: 100%;
  text-align: center;
  padding: 8px 16px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 24px;
}
#suggestion {
  background-color: #fff;
  color: #777;
}
#action {
  background-color: transparent;
}

$suggestion = $("#suggestion");
$action = $("#action").focus();
$action.on("keyup", function() {
  var text = $action.val();
  $suggestion.val(text ? `${text} suggestion` : "");
});
$action.on("blur", function() {
  $suggestion.val("");
});

修复原理： #

原来的布局中，input通过transform: translate(-50%, -50%)居中，若未固定宽度，input会随内容自适应宽度，导致两个input的宽度不一致，文本居中的基准点偏移。现在用固定宽度的容器包裹两个input，让它们的宽度完全相同，文本的居中基准就统一了，自然不会再错位。

内容的提问来源于stack exchange，提问作者Benjamin Brownlee