Как сделать 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"]});

Однако, это не похоже на работу для ребенка -
$('#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. Я применил стиль к обертке. Я не был уверен, останется ли цвет фона при вводе или нет.

Я добавил немного, чтобы сделать его более похожим на текстовое поле, где оно очистило текст, чтобы пользователь мог ввести свой текст. Можете вернуться и сделать это только для текста заполнителя, чтобы он не удалял все, что они ранее набрали.