如何在Django表单中为From Email字段实现自动补全功能

别担心，我来帮你把django-autocomplete-light的自动补全功能和from_email字段关联起来，其实只需要几个简单的步骤就能搞定：

步骤1：配置URL路由 #

首先，你需要把EmailAutocomplete视图映射到一个可访问的URL，这样前端能请求到邮箱数据。在你的项目urls.py中添加以下路由：

from django.urls import path
from .views import EmailAutocomplete

urlpatterns = [
    # 其他已有的路由...
    path('email-autocomplete/', EmailAutocomplete.as_view(), name='email-autocomplete'),
]

步骤2：修改表单字段的Widget #

接下来，把LeaveForm里的from_email字段的默认Widget替换成django-autocomplete-light的Select2Widget，并指定我们刚才配置的自动补全接口URL：

首先记得在forms.py顶部导入autocomplete_light：

import autocomplete_light

然后修改from_email字段的定义：

from_email = forms.EmailField(
    required=True,
    widget=autocomplete_light.Select2Widget(
        attrs={'style': 'width: 400px'},
        # 这里对应urls.py中设置的路由name
        autocomplete_url='email-autocomplete'
    )
)

修改后的完整forms.py应该是这样：

from django import forms
import autocomplete_light

class LeaveForm(forms.Form):
    leave_list = ( ('Casual Leave', 'Casual Leave'), ('Sick Leave', 'Sick Leave') )
    from_email = forms.EmailField(
        required=True,
        widget=autocomplete_light.Select2Widget(
            attrs={'style': 'width: 400px'},
            autocomplete_url='email-autocomplete'
        )
    )
    start_date = end_date = forms.CharField(widget=forms.TextInput(attrs={'type': 'date', 'style': 'width: 175px'}))
    leave_type = forms.ChoiceField(choices=leave_list, widget=forms.Select(attrs={'style': 'width: 400px'}))
    comments = forms.CharField(required=True, widget=forms.Textarea(attrs={'style': 'width: 400px; height: 247px'}))
    
    def clean_from_email(self):
        data = self.cleaned_data['from_email']
        if "@testdomain.com" not in data:
            raise forms.ValidationError("Must be @testdomain.com")
        return data

步骤3：在模板中加载autocomplete_light静态资源 #

要让自动补全的前端功能生效，你需要在渲染表单的模板中加载django-autocomplete-light的JS和CSS资源。示例模板代码如下：

{% load autocomplete_light %}
<!DOCTYPE html>
<html>
<head>
    <!-- 加载autocomplete_light的静态文件 -->
    {% autocomplete_light_static %}
</head>
<body>
    <form method="post">
        {% csrf_token %}
        <!-- 渲染表单 -->
        {{ form.as_p }}
        <button type="submit">提交申请</button>
    </form>
</body>
</html>

关键检查项 #

完成以上步骤后，别忘了确认以下几点：

• 确保autocomplete_light已经添加到你的settings.py的INSTALLED_APPS中：

  INSTALLED_APPS = [
      # 其他应用...
      'autocomplete_light',
  ]
  

• 用浏览器开发者工具的网络面板，检查当你在from_email输入框中输入内容时，是否有请求发送到/email-autocomplete/，并且返回了正确的JSON数据
• 你的EmailAutocomplete视图已经正确使用了legacy数据库，这点你已经做到了，没问题

这样设置后，用户在输入邮箱时，就会自动弹出从ListOfUsers表中匹配的邮箱列表啦！

内容的提问来源于stack exchange，提问作者Abilash Amarasekaran