如何在django-autocomplete-light中创建标记

问题描述

我尝试按照https://django-autocomplete-light.readthedocs.io/en/master/tutorial.html#overriding-javascript-code

中的描述自定义javascript加载

但是我没有看到如何为https://select2.org/tagging#customizing-tag-creation

中所述的createTag事件提供回调

有帮助吗？

# forms.py
class TickerWidget(autocomplete.ListSelect2):
    autocomplete_function = "ticker_autocomplete_init"


class CompanyForm(forms.ModelForm):
    class Meta:
        model = Company
        fields = ["ticker"]
        widgets = {
            "ticker": TickerWidget(
                url="tickers",attrs={
                    "data-ajax-delay": "250","required": True,"data-tags": "true",},)
        }

和

// app.js
document.addEventListener('dal-init-function',function () {
  yl.registerFunction('ticker_autocomplete_init',function ($,element) {
      var $element = $(element);
      // autocomplete function here
      console.log('I dont see this');
  });
})

解决方法

我一直在努力，最终想出了如何覆盖select2上的回调。

# forms.py

class TickerWidget(autocomplete.ListSelect2):
    autocomplete_function = "ticker_autocomplete_init"


class CompanyForm(forms.ModelForm):
    class Meta:
        model = Company
        fields = ["ticker"]
        widgets = {
            "ticker": TickerWidget(
                url="company-autocomplete",)
        }

和js

document.addEventListener('dal-init-function',function () {
    yl.registerFunction('ticker_autocomplete_init',function ($,element) {
        console.log('baz');
        
        var $element = $(element);
        $element.select2({
            placeholder: 'Company',ajax: {
                url: "/company-autocomplete",delay: 250,},createTag: function(params) {
                console.log('createTag',params);
                return {
                    id: params.term,text: params.term.toUpperCase(),}
            },tags: true,insertTag: function(data,tag) {
                tag.text = "Add: " + tag.text;
                // tag.isTag = true;
                data.push(tag);
            },});
        $element.on("change:selecting",function(e) {
            console.log('select');
            if (e.params && e.params.data) {

                var data = e.params.data;
                var requestForm = document.querySelector('#form-ticker-request');
                if (data.isTag) {
                    console.log('local tag selected',data);
                    requestForm.classList.remove('d-none');
                } else {
                    requestForm.classList.add('d-none');
                }
            }
        });
    });
  })

代码可在https://github.com/morenoh149/djangox-autocomplete-light上查看

django-autocomplete-light jquery-select2