Javascript 如何使jQueryUI自动完成在内容可编辑div的子元素上工作？

我有一个内容可编辑的divspan子元素，该子元素也是内容可编辑的。自动完成建议似乎对父元素有效，但对子元素无效。这是使用jquery ui的自动完成小部件。

HTML:

<div id="main" contenteditable="true">
    <span id="sub" contenteditable="true"></span>
</div>

JS:
如果我将autocomplete设置为父项-

$（'#main'）。autocomplete（{source=[“西红柿”、“土豆”、“豌豆”]}）

但是，这似乎不适用于子项-
$（'#sub'）。自动完成（{source=[“西红柿”、“土豆”、“豌豆”]}）

注意：我知道我正在span标记内键入，因为我正在使用一些javascript将插入符号转换到标记中

我希望建议只出现在我试图实现一个标签系统类似于Facebook的评论系统的跨度。提前感谢您的帮助。
可能不是最好的例子，但您可以在此处看到
main2
与
main1
的工作原理不同：


HTML

<div id="main1" contenteditable="true">
  Type Here parent suggestions
  <span contenteditable="true"></span>
</div>

<div class="main2-wrapper">
  <div id="main2" contenteditable="true" data-value="" data-placeholder="Type Here">
  </div>
</div>

jQuery

$(function() {
  var stuff = [
    "Tomato",
    "Potato",
    "Peas"
  ];
  $('#main1').autocomplete({
    source: stuff
  });
  $("#main2").text($("#main2").data("placeholder"));
  $("#main2").blur(function() {
      var v = $(this).text();
      var p = $(this).data("placeholder");
      $(this).data("value", v);
      if (v === "") {
        $(this).text($(this).data("placeholder"));
      }
    })
    .focus(function() {
      if ($(this).text() == $(this).data("placeholder")) {
        $(this).text("");
      }
    })
    .autocomplete({
      source: stuff,
      minLength: 3
    });
});

无论您使用的是
div
还是
span
，这都不重要，我只是更喜欢
div
。我将样式应用到包装上。我不确定打字时背景色是否应该保留

我添加了一点，使它更像一个文本字段，它清除了文本，允许用户输入他们的文本。可能会返回并仅对占位符文本执行此操作，以便它不会删除他们以前键入的内容。
可能不是最好的示例，但您可以在此处看到
main2
与
main1
的工作方式不同：


HTML

<div id="main1" contenteditable="true">
  Type Here parent suggestions
  <span contenteditable="true"></span>
</div>

<div class="main2-wrapper">
  <div id="main2" contenteditable="true" data-value="" data-placeholder="Type Here">
  </div>
</div>

jQuery

$(function() {
  var stuff = [
    "Tomato",
    "Potato",
    "Peas"
  ];
  $('#main1').autocomplete({
    source: stuff
  });
  $("#main2").text($("#main2").data("placeholder"));
  $("#main2").blur(function() {
      var v = $(this).text();
      var p = $(this).data("placeholder");
      $(this).data("value", v);
      if (v === "") {
        $(this).text($(this).data("placeholder"));
      }
    })
    .focus(function() {
      if ($(this).text() == $(this).data("placeholder")) {
        $(this).text("");
      }
    })
    .autocomplete({
      source: stuff,
      minLength: 3
    });
});

无论您使用的是
div
还是
span
，这都不重要，我只是更喜欢
div
。我将样式应用到包装上。我不确定打字时背景色是否应该保留

我添加了一点，使它更像一个文本字段，它清除了文本，允许用户输入他们的文本。可能会返回并仅对占位符文本执行此操作，以便它不会删除他们以前键入的内容。
在此处使用代码片段或小提琴将非常有用。这是我最接近我想要完成的内容，因为一旦您开始在红色（内部
span
元素）中键入内容，问题就会发生地区您的
span
元素被您刚才键入的文本破坏。因此，
autocomplete
没有启动。您的具体要求是什么？我的要求类似于您在Facebook的评论中键入@并接收您可以标记的人的建议。@wolf3D我建议在单击编辑时将
div
替换为
input
。将查看可编辑的内容，但autoComplete可能不喜欢。在此处使用代码片段或小提琴将非常有帮助。这是我最接近我想要完成的内容，因为一旦您开始在红色（内部
span
元素）区域键入内容，问题就会出现；您的
span
元素被您刚才键入的文本破坏。因此，
autocomplete
没有启动。您的具体要求是什么？我的要求类似于您在Facebook的评论中键入@并接收您可以标记的人的建议。@wolf3D我建议在单击编辑时将
div
替换为
input
。将查看可编辑的内容，但autoComplete可能不喜欢它。