跨度作为输入与 jquery ui 自动完成

Question

在我正在构建的网页中，我开始使用 -tags 作为启用内容可编辑标志的输入。这样做的原因是它们看起来更适合对齐，并且当您输入它们时它们能够调整自己的大小。我将跨度的内容保存在 keyup 上的隐藏输入字段中。

我会在需要时动态添加更多跨度。

现在，当人们在我的跨度字段中键入内容时，我需要能够自动完成，但 .autocomplete 似乎不适用于跨度字段（？），有什么简单的解决方案吗？

<div>
  <input type="hidden" name="generated_name[1]" />
  <span contenteditable="true" class="editbox"></span>
  <input type="hidden" name="generated_name[2]" />
  <span contenteditable="true" class="editbox"></span>
</div>
<script>
  $(document).ready(function () {
    $('.editbox').live('keyup', function() {
      $(this).prev().val($(this).html());
    });
  });
</script>

该代码至少对我很有效，我可以添加更多输入字段（输入+跨度）并且它有效。

现在我希望能够在输入跨度而不是输入字段时进行搜索，并执行以下操作：

$(document).ready(function() {
  var tags = [
    "Tag1", "Tag2", "Tag3", "Tag4", "Tag5", "Tag6", "Tag7"
  ];
  $('.editbox').autocomplete({
    source: tags
  });
});

有人知道这是否可以通过简单的方式实现吗？

Answer 1

我想没有办法解决这个问题，因为自动完成依赖于在输入上使用。那么，那两个</value>在那里做什么呢？他们应该是</span>。 滥用跨度作为输入对我来说毫无意义。输入的存在正是您使用它的目的，您也可以设置输入的样式，这不是用跨度替换它们的好借口。