如何通过datalist输入值匹配对应JS变量并展示其内容？

当然可以实现这个需求！其实你完全不用为每个输入可能性单独写判断逻辑，我们可以用更灵活的方式来匹配输入值和对应的内容，下面给你两种实用的方案：

方案一：使用对象存储键值对（推荐） #

这种方式更清晰规范，还不会污染全局作用域，步骤很简单：

1. 先在HTML里加一个用来展示内容的区域，方便用户看到结果
2. 用一个JS对象来存储所有输入值对应的内容，键就是datalist里的option值，值是你要展示的文本
3. 监听输入框的事件，实时获取输入值并从对象里取出对应内容展示

完整代码示例：

<input type="text" name="srch" id="boxP" list="datalist1">
<datalist id="datalist1">
  <option value="TEST">
  <option value="TEST1">
</datalist>
<!-- 用来展示结果的区域 -->
<div id="result"></div>

<script>
// 用对象统一管理输入值和对应内容，后续加新选项直接在这里加键值对就行
const contentMap = {
  TEST: "successful",
  TEST1: "这是TEST1对应的内容"
};

// 获取DOM元素
const inputBox = document.getElementById("boxP");
const resultArea = document.getElementById("result");

// 监听输入事件，实时更新展示内容
inputBox.addEventListener("input", function() {
  const inputValue = this.value.trim();
  // 从对象中取值，没有匹配到就显示提示文本
  const showContent = contentMap[inputValue] || "没有找到对应的内容";
  resultArea.textContent = showContent;
});
</script>

这种方式的好处是，后续你要加更多datalist选项，只需要在contentMap里添加新的键值对就行，完全不用修改事件逻辑，非常灵活。

方案二：直接读取全局变量（适合简单场景） #

如果你已经把内容存在全局变量里（比如你示例中的var TEST = "successful"），可以直接利用全局变量挂载在window对象上的特性，通过输入值作为变量名来读取：

完整代码示例：

<input type="text" name="srch" id="boxP" list="datalist1">
<datalist id="datalist1">
  <option value="TEST">
  <option value="TEST1">
</datalist>
<div id="result"></div>

<script>
// 全局变量
var TEST = "successful";
var TEST1 = "TEST1对应的内容";

const inputBox = document.getElementById("boxP");
const resultArea = document.getElementById("result");

inputBox.addEventListener("input", function() {
  const inputValue = this.value.trim();
  // 通过window[变量名]读取全局变量，没有匹配到就显示提示
  const showContent = window[inputValue] || "没有找到对应的内容";
  resultArea.textContent = showContent;
});
</script>

小提示 #

• 如果你希望只有用户选择datalist里的选项时才触发，可以把input事件换成change事件；input事件是实时响应输入，看你的需求选择。
• 用trim()处理输入值可以避免用户不小心输入空格导致匹配失败的问题。
• 一定要处理没有匹配到的情况，不然会显示undefined，影响体验。

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