datalist中option标签显示异常：下拉展label+value，选中后输入框显value

问题现象 #

• 下拉菜单同时显示label（地址名称）和value（坐标数组）内容
• 选中选项后，输入框中显示的是坐标数组而非地址名称

原因分析 #

datalist的option标签在不同浏览器中的渲染逻辑存在差异，当value为非字符串类型（比如数组）时，浏览器会将其转为字符串直接展示，同时和label内容叠加；此外datalist默认行为就是选中后将option的value值填入输入框。

解决方案 #

方案一：用自定义属性存储坐标，将label作为option的value

这是最直接的解决方式，既保证下拉只显示地址名称，选中后输入框也展示名称，同时能拿到所需坐标数据：

<input
  on:change={onChangeSuggestion}
  on:input={updateValue}
  list="inventoryLocations"
  id="store-locator-mapbox-input"
  placeholder="Search store or address..."
  type="text"
/>
<datalist id="inventoryLocations">
  {#each suggestions as location}
    <!-- 将地址名称设为value，用data-coords存储坐标 -->
    <option value={location.place_name} data-coords={JSON.stringify([location.geometry.coordinates[0], location.geometry.coordinates[1]])} />
  {/each}
</datalist>

在onChangeSuggestion事件中获取坐标：

function onChangeSuggestion(e) {
  const selectedOption = document.querySelector(`#inventoryLocations option[value="${e.target.value}"]`);
  if (selectedOption) {
    const coords = JSON.parse(selectedOption.dataset.coords);
    // 这里处理坐标相关逻辑
    console.log(coords);
  }
}

方案二：手动替换输入框的值（保留原value结构）

如果必须保留value为坐标数组，可以监听输入框的change事件，手动将输入框显示内容替换为对应的label：

<input
  on:change={onChangeSuggestion}
  on:input={updateValue}
  list="inventoryLocations"
  id="store-locator-mapbox-input"
  placeholder="Search store or address..."
  type="text"
/>
<datalist id="inventoryLocations">
  {#each suggestions as location}
    <option value={JSON.stringify([location.geometry.coordinates[0], location.geometry.coordinates[1]])} label={location.place_name} />
  {/each}
</datalist>

事件处理函数：

function onChangeSuggestion(e) {
  const input = e.target;
  const selectedOption = Array.from(document.querySelectorAll('#inventoryLocations option')).find(opt => opt.value === input.value);
  if (selectedOption) {
    // 先保存坐标值
    const coords = JSON.parse(selectedOption.value);
    // 将输入框显示内容替换为label
    input.value = selectedOption.label;
    // 后续处理坐标逻辑
    console.log(coords);
  }
}

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