实现可编辑文本框的Popover选单：点击项追加至文本框

完整代码实现 #

HTML #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<input type="text" id="tagInput" title="可选标签" data-toggle="popover" data-trigger="focus" placeholder="手动输入或选择标签" />

CSS（可选，优化视觉体验） #

.popover-content .tag-option {
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
}
.popover-content .tag-option:hover {
  background-color: #f5f5f5;
}

JavaScript #

$(document).ready(function() {
  // 定义要加载的选项数组
  const tagOptions = ["HTML", "CSS", "JavaScript", "Bootstrap", "jQuery"];

  // 动态生成Popover的选项列表
  function generateTagList() {
    let listHtml = '';
    tagOptions.forEach(tag => {
      listHtml += `<div class="tag-option">${tag}</div>`;
    });
    return listHtml;
  }

  // 初始化Popover
  $('#tagInput').popover({
    content: generateTagList(),
    html: true // 允许Popover内容为HTML
  });

  // 绑定选项点击事件：追加内容到输入框
  $('body').on('click', '.tag-option', function() {
    const input = $('#tagInput');
    const selectedTag = $(this).text();
    // 处理追加逻辑：已有内容则加空格分隔，直接追加
    const currentValue = input.val().trim();
    const newValue = currentValue ? `${currentValue} ${selectedTag}` : selectedTag;
    input.val(newValue);
    // 关闭Popover
    $('#tagInput').popover('hide');
  });
});

关键实现说明 #

• 动态加载选项：通过JS数组tagOptions生成Popover内的选项列表，初始化时传入Popover的content参数，同时开启html: true允许HTML内容。
• 内容追加逻辑：点击选项时，获取输入框当前内容，若已有内容则用空格（可自定义分隔符）拼接新选项，避免覆盖原有内容。
• 事件绑定：因为Popover内容是动态生成的，所以用$('body').on('click', '.tag-option', ...)的方式绑定点击事件，确保新生成的元素能触发事件。
• 保留手动输入：输入框本身支持手动输入，追加逻辑仅在点击选项时触发，不影响正常输入操作。

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