从文本输入中的多个选项中选择一个单词

Question

我有一个这样的文本模板：

I live in the middle of the {sea|city}, and I am {happy|sad}.

我需要一个文本输入，用户可以在其中编辑文本，但不应该有｛sea|city｝或任何其他类似的模式，应该有一个下拉列表来选择可用选项之一，用户也应该能够在编辑文本时按退格键删除下拉列表

但是，如果用户决定删除下拉列表，令牌{sea|city}也应该从原始文本中删除，这样我就可以保存编辑后的文本。

我试图分割文本，这样我就有了一个需要它的下拉列表和文本的多个文本输入，但这使得文本很难编辑，因为用户必须从一个输入跳到另一个输入，我需要让用户感觉它是一个完整的输入，而不是多个分离的输入。

有什么方法或库可以让我使用吗？

Answer 1

也许可以在某个地方创建一个带有关闭按钮的自定义下拉列表，使所有文本都是草书。。

并且getText函数很难看，我知道..：(但atm我不知道如何让它变得更好(如果你删除一个下拉列表，另一个下拉菜单将没有关闭按钮，因为它是基于类的，但由于你可以创建一个单独的组件，这将起作用。(

// this could be done way more nicer but i don't know how..
function getText(selected) {
let text = $('#place').text();
// first dropdown
if (selected === 'sea' || selected === 'city') {
text += ' ' + selected + $('#feeling').text() + ' ' + $('#feeling-select').find(":selected").text();
// second dropdown
} else if (selected === 'happy' || selected === 'sad') {
text += ' ' + $('#place-select').find(":selected").text() + $('#feeling').text() + ' ' + selected
} else {
// removed dropdown
text += $('#place-select').find(":selected").text() + $('#feeling').text() + $('#feeling-select').find(":selected").text();
}
console.log(text)
}
$('.delete-option').click(function() {
$('.delete-option').remove()
$('#place-select').remove()
getText(null)
});

$("select.option").change(function(event) {
const selected = $(this).children("option:selected").text();
getText(selected);
});

select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
#place-select,
#feeling-select {
border: none;
color: orange;
}
.delete-option {
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<label for="place" id="place">I live in the middle of the</label>
<select name="place" id="place-select" class="option">
<option value="sea">sea</option>
<option value="city">city</option>
</select>
<!-- use icon and place at top -->
<span class="delete-option"> x </span>
<label for="feeling" id="feeling"> and I am </label>
<select name="feeling" id="feeling-select" class="option">
<option value="happy">happy</option>
<option value="sad">sad</option>
</select>
<!-- use icon and place at top -->
<span class="delete-option"> x </span>
</div>

Answer 2

我最终为容器div使用了contenteditable=true标志，它允许键入和删除内部内容。此外，对于更复杂的下拉菜单-内部有多层子对象的divs，我必须使用contenteditable=false，以便在按下退格键后立即删除整个div。例如：

<div contenteditable=true>
Some text <div contenteditable=false>complex dropdown</div> more text.
</div>