关于devbridge autocomplete空搜索框及新增标签选中异常的问询

看起来你这个问题的核心是没把「新增标签的提示语句」和「实际要添加的标签内容」区分开，导致选中后文本框留了提示语，再次搜索又把提示语当成关键词，产生嵌套。我给你几个具体的解决思路和代码示例：

1. 给新增标签选项加标识，区分普通标签建议 #

在生成AJAX返回的建议项时，给「添加新标签」的选项加上自定义属性（比如data-is-new="true"），同时把实际的标签内容存在另一个属性（比如data-tag="用户输入的关键词"）里。这样前端就能轻松识别这是新增选项，而不是已有标签。

比如生成的DOM结构可以是这样：

<div class="tag-suggestion" data-is-new="true" data-tag="my-new-tag">添加‘my-new-tag’为新标签</div>

2. 选中选项时替换为实际标签内容 #

当用户点击建议项时，先判断是不是新增标签选项：如果是，就用data-tag里的实际内容填充输入框；如果是普通标签，就直接用选项文本。这样输入框就不会显示那个提示语句了。

举个jQuery的处理示例：

$('.tag-suggestion').on('click', function() {
  const $item = $(this);
  let tagContent;
  
  // 判断是否为新增标签选项
  if ($item.data('is-new')) {
    tagContent = $item.data('tag');
  } else {
    tagContent = $item.text();
  }
  
  // 把输入框的值替换为实际标签内容
  $('#tag-input').val(tagContent);
  
  // 这里可以追加逻辑：比如把标签加入已选标签列表，清空建议框等
});

3. 拦截嵌套搜索，避免重复生成提示语 #

在触发AJAX搜索前，先检查当前输入框的内容是不是「添加‘xxx’为新标签」这种格式。如果是，就提取里面的xxx作为实际搜索关键词，而不是用整个提示语句去请求。

搜索前的预处理代码：

function triggerTagSearch(query) {
  // 用正则匹配并提取实际标签内容
  const newTagMatch = query.match(/添加‘(.+)’为新标签/);
  if (newTagMatch) {
    query = newTagMatch[1]; // 替换成实际要搜索的关键词
  }
  
  // 发送AJAX请求搜索标签
  $.ajax({
    url: '/your-tag-search-api',
    data: { q: query },
    success: function(tags) {
      if (tags.length === 0) {
        // 没有匹配标签时，生成新增标签建议
        $('.suggestions-container').html(`
          <div class="tag-suggestion" data-is-new="true" data-tag="${query}">添加‘${query}’为新标签</div>
        `);
      } else {
        // 渲染已有标签的建议列表
        renderExistingTags(tags);
      }
    }
  });
}

4. 额外UI优化（可选） #

可以给新增标签的建议项加个独特样式，比如前面加个「+」图标，让用户一眼就能区分这是新增选项，体验更好：

.tag-suggestion[data-is-new="true"]::before {
  content: "+ ";
  color: #2ecc71;
  font-weight: bold;
}

这样处理后，选中新增选项时输入框会显示正确的标签内容，再次点击也不会出现嵌套的提示语了。

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