如何在datalist选项值中保留文本格式？

问题根源 #

原生<datalist>的<option>元素不支持渲染富文本格式（换行、列表），浏览器会自动合并所有空白字符（包括换行），导致显示和传递时格式丢失；同时输入框的value属性仅能存储纯文本，无法保留换行结构。

解决方案：替换为自定义下拉组件 #

放弃原生datalist，用HTML+JS模拟下拉列表，实现格式完整保留：

1. 修改HTML结构 #

替换原输入框+datalist为自定义容器，保留textarea：

<div class="datalist-container">
  <input type="text" id="Pekerjaan-` + count + `" class="form-control datalist-input" style="font-size:12px;text-align:center;width:220px;" placeholder="Ketik/Pilih">
  <div class="datalist-options" id="PekerjaanList-` + count + `" style="display:none; position:absolute; border:1px solid #ccc; max-height:200px; overflow-y:auto; background:white; width:220px; white-space:pre-line; font-size:12px;"></div>
</div>
<textarea style="width:100%;margin: auto;white-space: pre-line;font-size:12px" class="form-control" id="PekerjaanAmbil-` + count + `" name="Pekerjaan[]" cols="5" rows="2" required></textarea>

2. 调整PHP数据输出 #

确保JSON输出时保留原始换行符：

var dataambilpekerjaan = <?= json_encode($ambilpekerjaan, JSON_UNESCAPED_NEWLINES) ?>;

3. 自定义下拉逻辑（JavaScript） #

$(document).ready(function() {
  // 遍历所有自定义输入框
  $('.datalist-input').each(function() {
    const input = $(this);
    const optionsContainer = $('#' + input.attr('id').replace('Pekerjaan-', 'PekerjaanList-'));
    const targetTextarea = $('#' + input.attr('id').replace('Pekerjaan-', 'PekerjaanAmbil-'));

    // 生成带格式的下拉选项
    let optionsHtml = '';
    $.each(dataambilpekerjaan, function(key, value) {
      // 可选：将列表标记(-)替换为圆点，优化显示效果
      const formattedText = value.Pekerjaan.replace(/^- /gm, '• ');
      optionsHtml += `<div class="datalist-option" data-value="${value.Pekerjaan}">${formattedText}</div>`;
    });
    optionsContainer.html(optionsHtml);

    // 输入框聚焦/输入时筛选并显示下拉
    input.on('focus keyup', function() {
      const inputVal = $(this).val().toLowerCase();
      optionsContainer.find('.datalist-option').each(function() {
        $(this).toggle($(this).text().toLowerCase().includes(inputVal));
      });
      optionsContainer.show();
    });

    // 选中选项时填充内容
    optionsContainer.on('click', '.datalist-option', function() {
      const selectedValue = $(this).data('value');
      input.val(selectedValue.replace(/\n/g, ' ')); // 输入框显示为单行（可按需调整）
      targetTextarea.val(selectedValue); // Textarea保留完整原始格式
      optionsContainer.hide();
    });

    // 点击外部隐藏下拉
    $(document).on('click', (e) => {
      if (!$(e.target).closest('.datalist-container').length) {
        optionsContainer.hide();
      }
    });
  });
});

4. 添加基础CSS样式 #

.datalist-option {
  padding: 4px 8px;
  cursor: pointer;
}
.datalist-option:hover {
  background-color: #f0f0f0;
}
.datalist-container {
  position: relative;
}

效果说明 #

• 自定义下拉列表通过white-space:pre-line保留换行，替换列表标记让显示更直观
• 选中后直接将原始格式文本写入textarea，完全保留换行、列表结构
• 支持输入筛选功能，替代原生datalist的匹配逻辑

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