Question

我是初学者，我一直在玩select2.js的多选项。在历史学校数据库中，我们有超过300k的student_id。我可以让select2选项工作，但它非常慢，需要永远加载。我已经看到其他页面选择2加载大量数据并且工作正常。

我正在使用以下内容来加载select2。

$(document).ready(function () {
    $('.js-example-basic-multiple').select2();
  });

在Django中，我在我的模板中加载数据：

  <script src= "{% static '/search/user_select2.js' %}" type="text/javascript"></script>

             <div class="col"><h4 style="margin-top: 0"><strong>Student ID List</strong></h4><select data-placeholder="Choose a list of 3-4 User ids..." class="js-example-basic-multiple"  value = "{{ userid }}" style="width: 1110px" required>
             {% for user in userid %}
             <option value="{{ user }}"> {{ user }}</option>
             {% endfor %}
           </select>

在我的视图中使用以下arg定义了userid：

def multisearch(request):
    userid = STudent.objects.filter(student_status_id = 1).values('studentid')
    print(userid)

    args = {'userid':userid}

    return render(request, 'multisearch.html',args)

Answer 1

加载需要很长时间才能预加载select2输入的所有选项。我建议你使用select2到django-autocomplete-light来避免这个问题。它将为您提供设置自动完成系统和加载匹配选项的工具，同时在select2输入上键入文本。此外，结果分页，以便在您滚动select2下拉列表时加载它们。

基本上您将拥有自动填充视图：

from dal import autocomplete

from your_app.models import Student


class Status1StudentsAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        qs = Student.objects.filter(student_status_id=1)
        if self.q:  # self.q is the user-typed query
            qs = qs.filter(name__istartswith=self.q)
        return qs

当然，这需要路由：

from your_app.views import Status1StudentsAutocomplete

urlpatterns = [
    url(
        r'^autocomplete/students/status-1/$',
        Status1StudentsAutocomplete.as_view(),
        name='students_status1_autocomplete',
    ),
]

然后为您的字段使用自动完成小部件：

from dal import autocomplete

from django import forms


class SomeForm(forms.Form):
    student = forms.ModelChoiceField(
        queryset=Student.objects.filter(student_status_id=1),
        widget=autocomplete.ModelSelect2(url='student_status1_autocomplete')
    )

最后只需像往常一样显示您的表单，不要忘记将自定义css / js包含在{{ form.media }}中。

{% extend "your_layout.html" %}
{% block extrahead %} {# assuming extrahead block is within the <head> element #}
    {{ block.super }}
    {{ form.media }}
{% endblock %}

{% block content %} {# assuming you have a content block within your <body> element #}
    <form method="POST">
        {% csrf_token %}
        {{ form }}
        <button type="submit">Go!</button>
    </form>
{% endblock %}

Django选择2个多选慢速加载

1 个答案: