前端在输入框输入值时，下面的文本宽框就会出现值代码

这种输入提示框的实现方式，有多种实现方式，以下是其中一种方式的代码示例：

HTML 代码：

<div class="input-wrapper">
  <input type="text" id="input" placeholder="请输入关键词" />
  <ul class="suggest-list" id="suggest"></ul>
</div>

CSS 代码：

.input-wrapper {
  position: relative;
}
.suggest-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1;
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 0;
  margin: 0;
}
.suggest-list li {
  list-style: none;
  padding: 4px 10px;
  cursor: pointer;
}
.suggest-list li:hover {
  background-color: #f2f2f2;
}

JavaScript 代码：

const input = document.getElementById('input');
const suggest = document.getElementById('suggest');

input.addEventListener('input', function() {
  const keyword = this.value;
  // 根据输入的关键词请求数据源，这里假设数据源是一个数组
  const data = ['apple', 'banana', 'orange', 'pear', 'peach', 'pineapple'];
  const matchedData = data.filter(item => item.includes(keyword));
  // 渲染匹配到的数据
  suggest.innerHTML = '';
  for (let i = 0; i < matchedData.length; i++) {
    const li = document.createElement('li');
    li.innerText = matchedData[i];
    suggest.appendChild(li);
  }
});

这段代码会在输入框输入时，实时根据输入的值匹配数据源中的内容，并将匹配到的内容渲染到下拉框中。用户可以通过鼠标或键盘选择下拉框中的内容，然后将选择的内容填充到输入框中。