2

autocomplete-light を使用して、django で 2 つの依存ドロップダウン リスト (大陸、国) を持つ非管理者フォームを作成しようとしています。最初のドロップダウン リストには大陸のリストが含まれ、2 番目のドロップダウン リストには国のリストが含まれます。ユーザーが大陸の 1 つを選択すると、その大陸の国のみが国のドロップダウン リストに表示されます。

2 つの依存する入力フィールドを正常に動作させることができましたが、これらの入力フィールドをドロップダウン リストに変換できません。以下は私が使用しているコードです。依存入力フィールドを依存ドロップダウンリストに変換するために何が必要かを説明するのに役立つことを願っています。forms.py でウィジェットを適用しようとしましたが成功しませんでした。forms.py から「widgets = autocomplete_light.get_widgets_dict(Locations)」行を削除すると、ドロップダウン リストが表示されますが、2 つのリスト間の依存関係が失われます。

#models.py
    from django.db import models
    from django import forms
    import autocomplete_light

    class Continent(models.Model):
       continent_id = models.BigIntegerField(primary_key=True)
       continent_nm = models.CharField(max_length=100, blank=True)    
       class Meta:
          db_table = 'continent'

       def __unicode__(self):
          #return self.continent_nm       
          return u'%s %s' % (self.continent_id, self.continent_nm)    


    class Country(models.Model):
       country_id = models.BigIntegerField(primary_key=True)
       country_nm = models.CharField(max_length=100, blank=True)
       continent  = models.ForeignKey(Continent, null=True, blank=True)
       class Meta:
          db_table = 'country'

       def __unicode__(self):
          #return self.country_nm       
          return u'%s %s' % (self.country_nm, self.country_id)    

    class Locations(models.Model):
        continent = models.ForeignKey(Continent) 
        country   = models.ForeignKey(Country) 

        def __unicode__(self):
            return u'%s %s' % (self.continent, self.country)  


#forms.py
    import autocomplete_light 
    from django import forms
    from insights.models import Locations

    class DummyForm(forms.ModelForm):  
        class Meta:
            model = Locations    
            widgets = autocomplete_light.get_widgets_dict(Locations) 


# views.py
    from django.shortcuts import render
    from django.http import HttpResponse
    from insights.forms import DummyForm

    def index(request):
       form = DummyForm()
       context = {'form': form}   
       return render(request, 'insights/index.html', context) 



# autocomplete_light_registry.py
    import autocomplete_light
    import logging
    from insights.models import Continent, Country


    class AutocompleContinent(autocomplete_light.AutocompleteModelBase):
        search_fields= ('continent_id', 'continent_nm',)
        autocomplete_js_attributes={'placeholder': 'continent name ..'}


    autocomplete_light.register(Continent, AutocompleContinent)

    class AutocompleteCountry(autocomplete_light.AutocompleteModelBase):
        autocomplete_js_attributes={'placeholder': 'country name ..'}
        search_fields=('country_id', 'country_nm',)

        def choices_for_request(self):
            q = self.request.GET.get('q', '')
            continent_id = self.request.GET.get('continent_id', None)

            choices = self.choices.all()
            if q:
                choices = choices.filter(country_nm__icontains=q)
            if continent_id:
                choices = choices.filter(continent_id=continent_id)

            return self.order_choices(choices)[0:self.limit_choices]

    autocomplete_light.register(Country, AutocompleteCountry)    

#HTML

    <!-- index.html -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="/static/insights/dependant_autocomplete.js"></script>
    {% load staticfiles %}
    {% include 'autocomplete_light/static.html' %}

    <body>
    {% block content %}
      <form action='' method='post' enctype='multipart/form-data'>
      {{ form.as_p }}
      {% csrf_token %}        
      </form>
    {% endblock %}                
    </body>

dependant_autocomplete.js

$(document).ready(function() {
    $('body').on('change','.autocomplete-light-widget select[name$=continent]', function() {
        alert('autocomplete dependant');
        var continentSelectElement = $(this);
        var countrySelectElement = $('#' + $(this).attr('id').replace('continent', 'country'));
        var countryWidgetElement = countrySelectElement.parents('.autocomplete-light-widget');

        // When the continent select changes
        value = $(this).val();

        if (value) {
            // If value is contains something, add it to autocomplete.data
            countryWidgetElement.yourlabsWidget().autocomplete.data = {
                'continent_id': value[0],
            };
        } else {
            // If value is empty, empty autocomplete.data
            countryWidgetElement.yourlabsWidget().autocomplete.data = {}
        }

    })
});
4

0 に答える 0