Javascript JS动态添加一个列表，如果用户输入{

我正在创建一个文本可编辑的div框，用户可以在其中添加文本并通过添加诸如First_Name、Last_Name等字段对其进行个性化设置。我希望在用户按{键时显示选项

我做了一个js，当用户键入{时会被触发，并添加了一个带有选项的列表，但是当脚本运行时，整个列表会被添加到输入框中，而不是提供选择选项

这是我的文本div和Js代码

<div contenteditable class="text_im" name="text_im" placeholder="Enter Text" maxlength="640"></div>

脚本：

$(document).keyup(function (e) {
  if ($(".text_im:focus") && (e.keyCode === 219)) {
     var options = '<ul><li>{First_Name}</li><li>{Last_Name}</li> <li>{Email}</li><li>{Phone}</li></ul>';
     $(".text_im").append(options);
  }
});

---

我尝试搜索任何提示或教程，但找不到任何。如果您可以向我推荐一些教程。

您需要使用一个库来获得跨浏览器、现代外观的结果，但基本功能可以如下所示：

从模板创建options元素，并在需要时为其提供在插入符号位置正确显示所需的CSS呈现。 当字符已经在div元素中时，在按键上显示它。 捕获鼠标在选项上的单击 每当按下某个键或用户单击某个选项时将其隐藏 选择该选项后，插入相应的文本，除了已经存在的开口{。 下面是一些代码，但请注意，要使这个跨浏览器和美观的附加功能，您需要更多。这只是显示一个基本设置：

//为工具提示创建尚不在DOM中的元素 var tooltip=$'template'.clone.attr'id'，'tooltip'.get0； 函数INSERTATCARTENODE，caretBefore=false{ 变量范围=window.getSelection.getRangeAt0； range.insertNodenode； range.collapsecaretBefore； } $document.keypress功能e{ $tooltip.remove；//隐藏工具提示将其与DOM分离 var$div=$.text\u im， ch=String.fromCharCodee.which；//获取类型化字符 if！$div.is:focus | | ch！='{'返回； setTimeoutfunction{//延迟一点，以确保插入符号位置正确 InsertAttCartToolTip，true；//在插入符号处插入工具提示 }, 100; }; $document.on'click'，tooltip li'，函数{ var text=$this.text.substr1；//要插入的文本 $tooltip.remove；//隐藏工具提示将其与DOM分离 $.text\u im.focus；//确保div具有焦点 InsertAttCartDocument.createTextNodetext；//插入文本 }; .text_im{ 边框：1px实心； 最小高度：40px } 模板{ 显示：无； } 工具提示{ 位置：固定； 边缘顶部：-0.2米； 背景：eee； 显示：内联块； 光标：指针； } 工具提示：悬停{ 背景：ccc； }

---

{名字}{姓氏}{电子邮件}{电话}你的选项变量是一个简单的html元素。因此，一个html元素（在本例中是一个列表）会添加到你的dom树中。你想添加用户可以单击的按钮还是想要的行为？我想你想添加的功能是自动完成的。我确信已经有插件提供自动完成或建议下拉列表。我想是，如果ser正在键入Hello{，它将显示我拥有的字段，当用户单击任何字段时，它将添加到文本中。例如，如果他们选择{first_name}，它将添加该字段，输入字段中的文本将更改为Hello{first_name} @conste@Lian谢谢你的提示。我发现这个@Stacythonpson：我希望这个插件适合你的情况。如果不行，你可以随时扩展它以满足你的需要。