Django使用下拉菜单将字段转换为标记

Question

在django的表单中，我有一个名为package\u includes的字段和一个名为price的字段。现在，包\u中包含的内容只是文本。所以，如果我输入“纸，胶水，闪光”，它将显示完全一样，我键入它，不能改变任何东西。但是，我希望文本像单个标记一样工作->；How I want tags to look

因此，当你点击其中一个单独的项目（例如：“纸张”，“胶水”，或“闪光”），我希望它显示一个下拉列表，让你可以选择把额外的闪光额外2.00美元的总额。你知道吗

另外，在文本的末尾我想要一个显示“Add”的标签，这个函数允许你添加这个特定包中没有的项目。例如，你应该可以加蜡笔5美元，荧光笔2.50美元，等等

我是编程新手，不完全了解如何在django的字段中向这样的文本添加函数。提前感谢您的帮助！你知道吗

Answer 1

不幸的是，你的问题的答案并不是如何从0到一个完整的工作示例的一步一步的指导-只是一个指向正确方向的指针。你知道吗

您需要的是通过CSS（产生您想要的视觉效果）和JavaScript（处理下拉功能；它很可能是您自己基于jQuery的脚本）来实现的。所有你想要的东西都需要在Internet浏览器中生存（执行），Django只能通过提供静态CSS和脚本文件，并在实际页面中引用它们（当你把它们放在正确的模板中时）来提供帮助。你知道吗

下面是Wagtail Admin执行类似操作的示例：

如果在浏览器中打开页面源代码，您将看到以下所有HTML代码：

<div class="field-content">
    <div class="input  ">
            <input id="id_tags" name="tags" type="text" value="&quot;hello world&quot;, blog" /><script>initTagField("id_tags", "/admin/tag-autocomplete/");</script>
        <span></span>
    </div>
</div>

但是，如果使用FireBug、浏览器的开发工具或Web Developer扩展打开页面，并应用视觉样式，它将分解为以下内容：

如果您注意到，应用于表单输入元素的样式是display: none;。您看到的实际上是样式化的无序列表元素。为了能够在脚本中使用它们，您需要能够从JS函数中获取它们/它们的内容。一种策略是将id属性分配给所有可见的<li>元素。它可以是基于计数器的东西（例如id="shopping-cart-item-0"、id="shopping-cart-item-1"，等等）。另一种方法是为<div class="input">元素分配一个id，并在函数中获取其类型<li>的所有DOM后代。任何对你更好的东西。然后，您可以解析脚本中list元素的标签（内部文本），以获得您正在处理的项目的类型，并从那时起找到折扣价格并应用它。。。你知道吗

我建议您从一个工作示例开始—找到一些使用taggit或类似Django包的应用程序，并将其安装在测试应用程序中。然后，您可以使用浏览器或首选的web开发扩展来使用CSS，并查看不同的选项如何影响所需内容的视觉效果。一旦您熟悉了这一点，就可以了解如何使用jQuery构建下拉菜单。我相信jQuery站点有足够的关于这个主题的教程。你知道吗