Flutter/Dart：如何实现输入关键词时的文本补全提示功能

直接上可运行的代码方案，完全贴合你的需求：

核心实现逻辑 #

• 用容器包裹输入框和提示文本元素，让两者重叠摆放；输入框设透明背景，提示文本在下层显示完整的匹配内容，输入的文字会盖住提示的前半段，剩下的部分就自然变成淡显提示
• 监听输入框的输入动作，实时在列表里找前缀匹配的第一个词汇，更新提示文本
• 监听回车按键，按下时直接把提示文本完整填充到输入框中

完整代码实现 #

HTML 结构 #

<div class="input-container">
  <input type="text" id="autocomplete-input" placeholder="输入内容...">
  <span id="hint-text"></span>
</div>

CSS 样式 #

.input-container {
  position: relative;
  width: 250px;
}

#autocomplete-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: transparent;
  color: #333;
}

#hint-text {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 16px;
  color: #ccc;
  pointer-events: none; /* 避免提示文本干扰输入框操作 */
}

JavaScript 逻辑 #

// 你的候选字符串列表
const wordList = ['apple', 'ananas', 'banana'];
const input = document.getElementById('autocomplete-input');
const hintText = document.getElementById('hint-text');

// 更新提示文本的函数
function updateHint() {
  const inputVal = input.value.trim();
  if (!inputVal) {
    hintText.textContent = '';
    return;
  }

  // 筛选出第一个前缀匹配的词汇
  const matchedWord = wordList.find(word => word.startsWith(inputVal.toLowerCase()));
  if (matchedWord) {
    // 提示文本显示完整匹配项，输入的内容会盖住前半部分
    hintText.textContent = matchedWord;
  } else {
    hintText.textContent = '';
  }
}

// 输入时实时更新提示
input.addEventListener('input', updateHint);

// 按回车填充完整提示内容
input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && hintText.textContent) {
    input.value = hintText.textContent;
    hintText.textContent = '';
  }
});

效果对应 #

• 输入a时，输入框下层会显示完整的ananas，你输入的a会盖住提示的第一个a，剩下的nanas以淡灰色显示，就是你要的淡显提示
• 输入ap时，会匹配到apple，ple部分淡显出来
• 按下回车键后，输入框的值会直接变成对应的完整提示词

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