Django - 将字段转换为带有下拉列表的标签

Question

在我的 django 表单中，我有一个名为 package_includes 的字段和一个名为 price 的字段。现在，package_includes 中的内容只是文本。因此，如果我输入“纸、胶水、闪光”，它将完全按照我输入的方式显示，无法更改任何内容。但是，我希望文本像单个标签一样工作 ->How I want tags to look

因此，当您单击单个项目（例如：“纸”、“胶水”或“闪光”）时，我希望它显示一个下拉菜单，让您可以选择额外支付 2.00 美元的额外闪光总计。

另外，在文本的末尾，我想要一个显示“添加”的标签，此功能将允许您添加未包含在此特定包中的项目。例如，您应该能够以 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 开发者扩展程序打开页面，并应用视觉样式，它将分解为如下内容：

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

我建议您从一个工作示例开始 - 找到一些使用 taggit 或类似 Django 包的应用程序并将其安装在测试应用程序中。然后，您可以使用您的浏览器或首选的 Web 开发扩展在它们上使用 CSS，并查看不同的选项如何影响您需要的视觉方面。一旦你对此感到满意，看看如何使用 jQuery 构建下拉菜单。我相信 jQuery 网站有足够的关于这个主题的教程。