在下拉选择名称中加载外键数据太慢答案

【问题标题】：loading foreign key data in drop down select name too slow在下拉选择名称中加载外键数据太慢
【发布时间】：2022-02-06 19:14:33
【问题描述】：

我正在尝试将外键数据显示为下拉列表，但是我们有一个大数据，问题是加载具有外键下拉字段的页面需要很长时间，有没有办法部分加载它？这是我的models.py

class Vistor(models.Model):
admin = models.ForeignKey(User,on_delete=models.PROTECT,default=1)
full_name = models.CharField(max_length=150,verbose_name=_('full name'))
dob = models.DateField(max_length=14,verbose_name=_('dob'))
city = models.ForeignKey(City,on_delete=models.CASCADE,verbose_name=_('city'))

class Meta:
    constraints = [
        models.UniqueConstraint(fields=['full_name','dob','city'],name='full_information')
    ]

def __str__(self):
    return f'{self.full_name} - {self.city} - {self.dob}'

这是我的views.py

def add_new_post(request):
    ...
    context = {
        'form':form,
        'room_number':room_number,
        'cities':City.objects.all(),
        'all_guests':Vistor.objects.all().order_by('-pk'), #the problem is here, has a big data
        }

    return render(request,'booking/add_booking.html',context)

这是我的模板

      <div class="grid md:grid-cols-10 md:gap-5 child_formset_row" id="guests_no-${form_no}">
        <div class="col-span-5 groupinput relative bglightpurple mt-2 rounded-xl">
            <label class="text-white absolute top-1 mt-1 mr-2 text-xs">{% trans "full information" %}</label>
            <select name="guestinfo-0" id="guestinfo-0" class="visitors w-full pr-2 pt-6 pb-1 bg-transparent focus:outline-none text-white">
                <option value="-----">------</option>
                {% for c in all_guests %}
                <option value="{{ c.full_name }} - {{c.city}} - {{c.dob | date:'Y-m-d'}}">{{ c.full_name }} - {{c.city}} - {{c.dob | date:'Y-m-d'}}</option>
                {% endfor %}                                    
            </select>
        </div>    
        <div class="col-span-4 groupinput relative bglightpurple mt-2 rounded-xl">
            <label class="text-white absolute top-1 mt-1 mr-2 text-xs">{% trans "reason" %}</label>
            <input type="text" name="reason-0" id="reason-0" value="" required class="w-full pr-2 pb-1  pt-6 bg-transparent focus:outline-none text-white">
        </div> 
        <button type='button' class="col-span-1 flex items-center justify-center groupinput relative bglightpurple mt-2 rounded-xl" onclick="remove_form(this,${form_no})"><i class="text-red-600 far fa-trash-alt"></i></button>
        
    </div>

请问有办法分部分加载吗？非常感谢您的帮助..

【问题讨论】：

当您在下拉列表中有太多选项时，它开始给用户带来大量时间搜索选项的负担，正如您所经历的那样，前端可能会非常繁重。一个不错的选择是使用 ajax 创建一个基于搜索的下拉字段。例如，当用户开始输入用户名时，它将动态地将结果作为选项返回到前端。见这里：etemkeskin.com/index.php/2021/01/14/…
@Lewis 谢谢你的回复，但这不是我想要的，它是一个预订系统，我要防止添加重复的名字：包含：全名，出生城市，不想花时间通过选择某人并查看他/她的城市，如果正确，然后添加它

标签： javascript jquery django ajax

【解决方案1】：

您可以使用django-autocomplete-light 以及利用 Django 表单来显示该元素。

这提供了一个可搜索和可滚动的下拉菜单，可以使用分页类型的概念加载您的数据。

【讨论】：