Tom-Select 作为 Django 小部件

问题描述

我想使用 tom-select 作为 Django 自动完成选择小部件。

对应的数据库表（Runners）中有几百行，所以无法全部加载到html页面中。

在模型 RaceTeam 中，我有一个 Runner 的外键。

选择小部件将用于整个页面和 html 片段（通过 htmx）。

我尝试了子类 django.forms.Select，但这会将所有 db 行吸入 widget.choices。

解决方法

我使用这个解决方案：

我把tom-select JS+CSS复制到static/relayrace/vendor/。

class RunnerSelectWidget(Select):
    class Media:
        css = {
            'all': ('relayrace/vendor/tom-select.css',)
        }
        js = ('relayrace/vendor/tom-select.complete.min.js',)

    def set_choices(self,value):
        # there can be several thousand choices. We don't want them here
        self._choices = []

    def get_choices(self):
        choices = list(self._choices)
        return choices

    choices = property(get_choices,set_choices)

    def get_context(self,name,value,attrs):
        context = super().get_context(name,attrs)
        context['widget']['attrs']['class']='runner-select'
        return context

    def optgroups(self,attrs=None):
        # Make the initial value available
        self._choices = [(id,runner_to_select_text(Runner.objects.get(pk=id))) for id in value]
        return super().optgroups(name,attrs)


def runner_select_json(request):
    # You might want to add some permission checking here. Otherwise everybody
    # can get data via this endpoint.
    query = request.GET.get('q','').strip()
    qs = get_queryset(query)
    items = [dict(value=r.pk,text=runner_to_select_text(r)) for r in qs]
    return JsonResponse(dict(items=items,total_count=len(items)))

def runner_to_select_text(runner):
    return f'{runner.user.first_name} {runner.user.last_name}'

def get_queryset(query):
    if not query:
        return Runner.objects.none()
    return Runner.objects.filter(Q(user__username__icontains=query)|
                                     Q(user__first_name__icontains=query)|
                                     Q(user__last_name__icontains=query)).order_by('user__username')

小部件的使用：

class RaceTeamForm(forms.ModelForm):
    class Meta:
        model = RaceTeam
        widgets = {
            'leader': RunnerSelectWidget(),}

JS 在整个页面加载和片段加载时初始化小部件：

htmx.onLoad(function(elt) {
    var allSelects = htmx.findAll(elt,".runner-select")
    for( select of allSelects ) {
      new TomSelect(select,{
        // fetch remote data
        load: function(query,callback) {

            var url = '/runner_select_json?q=' + encodeURIComponent(query);
            fetch(url)
                .then(response => response.json())
                .then(json => {
                    callback(json.items);
                }).catch(()=>{
                    callback();
                });

        }
    })}});

urls.py

url('runner_select_json',runner_select_json,name='runner_select_json')