javascript - 如何使 Jquery UI 自动完成功能适用于内容可编辑 div 的子元素？

Question

我有一个内容可编辑的 div ，其中的 span 子元素也是内容可编辑的。自动完成建议似乎适用于父元素，但不适用于子元素。这是使用 jquery ui 的自动完成小部件。

HTML:

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

JS:
如果我将自动完成设置为父项，则此方法有效 -
$('#main').autocomplete({ source = ["Tomato", "Potato", "Peas"]});

但是，这似乎对 child 不起作用 -
$('#sub').autocomplete({ source = ["Tomato", "Potato", "Peas"]}) ;

注意:我知道我正在 span 标签内输入内容，因为我使用一些 javascript 将插入符号移动到标签中。

我希望仅针对跨度显示建议，因为我正在尝试实现类似于 Facebook 评论系统的标记系统。预先感谢您的帮助。

Answer 1

可能不是最好的示例，但您可以在此处看到 main2 与 main1 的工作方式有何不同:

https://fiddle.jshell.net/Twisty/o1f0wuph/

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>

CSS

#main1 {
  background-color: blue;
  display: block;
}

.main2-wrapper {
  background-color: red;
  display: block;
  margin: 3px;
  width: 300px;
  position: relative;
}

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。我将样式应用到 wrapper 上。我不确定打字时是否应该保留背景颜色。

我添加了一些内容，使其更像一个文本字段，它清除了文本以允许用户输入文本。 可能会返回并仅对占位符文本执行此操作，这样就不会删除他们之前输入的任何内容。