如何使 Jquery UI 自动完成对内容可编辑 div 的子元素起作用？答案

【问题标题】：How to make Jquery UI autocomplete work on child elements of a content editable div?如何使 Jquery UI 自动完成对内容可编辑 div 的子元素起作用？
【发布时间】：2016-11-24 21:22:58
【问题描述】：

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

HTML:

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

JS：
如果我将自动完成设置为父级 -
$('#main').autocomplete({ source = ["Tomato", "Potato", "Peas"]});

但是，这似乎不适用于孩子 -
$('#sub').autocomplete({ source = ["Tomato", "Potato", "Peas"]});

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

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

【问题讨论】：

工作代码 sn-p 或 fiddle 在这里会很有帮助。
这是最接近我想要完成的目标fiddle.jshell.net/88m02oug/2
问题正在发生，因为一旦您开始在红色（内部 span 元素）区域中输入；您的 span 元素正在被您刚刚输入的文本破坏。因此autocomplete 没有启动。您的具体要求是什么？
我的要求类似于你在 Facebook 的评论中输入 @ 并接收你可以标记的人的建议。
@wolf3D 我建议在点击编辑时将div 替换为input。会看内容可编辑，但自动完成可能不喜欢。

标签： javascript jquery jquery-ui autocomplete jquery-ui-autocomplete

【解决方案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。我将样式应用于包装器。我不确定打字时是否应该保留背景颜色。

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

【讨论】：