मेरा विकल्प मल्टीपल इन्पुट + ऑटोकम्प्लीट है

शुरुआत करने के लिए, मैं आगामी छुट्टियों पर सभी को बधाई देना चाहूंगा!

और अब मेरी कहानी का सार।

कुछ हफ्ते पहले मुझे django में ड्रॉपडाउन बनाने की आवश्यकता थी। जैसे ही आप टाइप करते हैं मान स्वचालित रूप से लोड किए जाने चाहिए और उपयोगकर्ता को सूची से एक मान का चयन करने और अपने स्वयं को जोड़ने में सक्षम होना चाहिए।

पहले, आइए देखें कि हम किस परिणाम का अनुसरण कर रहे हैं:



तो, मॉडल के साथ फाइल। उदाहरण के लिए, मैंने बस दो मॉडल बनाए और उन्हें कईToManyField का उपयोग करके लिंक किया।

models.py

from django.db import models class City(models.Model): name = models.CharField(max_length=150, unique=True) class Country(models.Model): name = models.CharField(max_length=100) cities = models.ManyToManyField(City, blank=True) 

फिर मैं मानक विगेट्स सीखने के लिए चढ़ गया। मल्टीहैडइनप्यूट सबसे उपयुक्त निकला, लेकिन यह हिडनइंपुट से विरासत में मिला था और अब तक इसका कोई स्वत: पूर्ण कार्य नहीं था। फ़ाइल> नया चलो।

widget.py

 from django.forms.util import flatatt from django.utils.datastructures import MultiValueDict, MergeDict from django.utils.encoding import force_unicode class MultipleInput(Input): input_type = 'text' def __init__(self, attrs=None, choices=()): super(MultipleInput, self).__init__(attrs) self.choices = choices def render(self, name, value, attrs=None, choices=()): if value is None: value = [] final_attrs = self.build_attrs(attrs, type=self.input_type, name=name) id_ = final_attrs.get('id', None) inputs = [] for i, v in enumerate(value): input_attrs = dict(value=force_unicode(v), **final_attrs) if id_: input_attrs['id'] = '%s_%s' % (id_, i) inputs.append(u'<p><input%s /><a href="#" id="remove_%s">Remove</a></p>' % (flatatt(input_attrs), id_)) return mark_safe(u'\n'.join(inputs)) def value_from_datadict(self, data, files, name): if isinstance(data, (MultiValueDict, MergeDict)): return data.getlist(name) return data.get(name, None) 

मैंने क्या किया? मैंने मानक MultipleHiddenInput लिया, इसे इनपुट से विरासत में मिला और इनपुट्सएपेंड बदल दिया। जैसा कि आप देख सकते हैं, लगभग कुछ भी नहीं बदला है। Inputs.append में, उपयोगकर्ता की ओर प्रविष्टियों को हटाने के लिए आवश्यक HTML कोड। यह आवश्यक क्यों है, यह नीचे समझा जा सकता है जब मैं प्रपत्रों की फ़ाइल का वर्णन करूंगा।

अब रूप। शहरों के क्षेत्र के लिए, पहले से लिखा गया एकाधिकInput विजेट स्थापित करें। साथ ही विजेट पर आप विशेषता 'वर्ग' को मान 'स्वतः पूर्णता' के साथ देख सकते हैं। पहले से ही नाम से यह स्पष्ट है कि यह भविष्य के स्वत: पूर्ण के लिए आवश्यक है।
ManyToManyField बंडल के व्यवहार में परिवर्तन के कारण, __init__ को ओवरराइड करने की आवश्यकता प्रपत्र पर दिखाई दी। यहां हम तत्वों के क्रम को ध्यान में रखते हुए डुप्लिकेट की जांच करते हैं और उन्हें हटाते हैं।
यदि प्रपत्र त्रुटियों के साथ प्रस्तुत किया गया था, तो यह इस बिंदु पर है कि __init__ हमारी मदद करता है, यह शहरों के लिए सभी मूल्यों को बचाता है और उन्हें उपयोगकर्ता को वापस भेजता है।

forms.py

 from django import forms from myapp.widget import MultipleInput class CreateCountryForm(forms.Form): name = forms.CharField(widget=forms.TextInput(), required=True) cities = forms.CharField(widget=MultipleInput(attrs={'class' : 'autocompleteCity'}), required=False) def __init__(self, *args, **kwargs): super(CreateCountryForm, self).__init__(*args, **kwargs) s = kwargs.get('data', None) if s: cities = s.getlist('cities') for i in xrange(len(cities)-1, -1, -1): if cities.count(cities[i]) != 1: del cities[i] 

यह हमारे मॉडलों को ठीक से सहेजने के लिए मैपिंग लिखने के लिए बना हुआ है। साथ ही ऑटो-पूर्ति के लिए अजाक्स अनुरोधों को स्वीकार करने के लिए दूसरा मानचित्रण।

views.py

 from django.shortcuts import render_to_response from django.http import HttpResponseRedirect from django.template import RequestContext from myapp.forms import CreateCountryForm from myapp.models import City def create_country(request, form_class=None, template_name='create_country.html'): form_class = CreateCountryForm if request.method == 'POST': form = form_class(data=request.POST, files=request.FILES) if form.is_valid(): obj = form.save(commit=False) obj.save() cities = request.POST.getlist('cities') obj.cities.clear() for c in cities: city, created = City.objects.get_or_create(c) obj.cities.add(city) return HttpResponseRedirect('index') else: form = form_class() context = { 'form': form, } return render_to_response(template_name, context, context_instance=RequestContext(request)) def city_autocomplete(request): try: cities = City.objects.filter(name__icontains=request.GET['q']).values_list('name', flat=True) except MultiValueDictKeyError: pass return HttpResponse('\n'.join(cities), mimetype='text/plain') 

अच्छी तरह से और पाठ्यक्रम के url विन्यास।

urls.py

 from django.conf.urls.defaults import * from myapp import views urlpatterns = patterns('' url(r'^city_autocomplete/$', views.city_autocomplete, name='city_autocomplete'), url(r'^create_country/$', views.create_stream, name='stream_create_stream'), ) 

हमने सभी सबसे कठिन को पार कर लिया, एक टेम्पलेट लिखने के लिए आगे बढ़ें। मैंने विशेष रूप से किसी भी प्रकार की विरासत के बिना एक टेम्पलेट लिखा है, बस सार को प्रतिबिंबित करने के लिए। ऑटो- कम्प्लीट के लिए उदाहरण jQueryAutocompletePlugin का उपयोग करता है।

create_country.html

 <!DOCTYPE html> <html lang="ru"> <head> <link type="text/css" href="https://github.com/agarzola/jQueryAutocompletePlugin/blob/master/jquery.autocomplete.css" media="all" rel="stylesheet" /> <script type="text/javascript" src="https://github.com/agarzola/jQueryAutocompletePlugin/blob/master/jquery.autocomplete.js"></script> <script type="text/javascript" src="{{ MEDIA_URL }}js/add_and_remove.js"></script> </head> <body> <form enctype="multipart/form-data" action="" method="post">{% csrf_token %} <label for="id_name"></label> {{ form.name }}</br> <a href="#" id="addCity"> </a> <div id="p_cities"> {{ form.cities }} </div> <script type="text/javascript"> jQuery().ready(function() { jQuery(".autocompleteCity").autocomplete("/city_autocomplete/", { multiple: false }); }); </script> <input class="button" type="submit" value=""/> </form> </body> </html> 

और पूर्णता के लिए, मैं add_and_remove.js फ़ाइल का एक उदाहरण देता हूं।

add_and_remove.js

 $(function() { var CitiesDiv = $('#p_cities'); var i = $('#p_cities p').size(); $('#addCity').live('click', function() { $('<p><input class="autocompleteCity ac_input" type="text" id="id_cities_' + i +'" size="20" name="cities" placeholder="Input Value" autocomplete="off" /><a href="#" id="remove_id_cities">Remove</a></p>').appendTo(CitiesDiv); $('#id_cities_' + i).focus(); i++; jQuery(".autocompleteCity").autocomplete("/city_autocomplete/", { multiple: false }); return false; }); $('#remove_id_cities').live('click', function() { if( i > 0 ) { $(this).parents('p').remove(); i--; } return false; }); }); 

PS यह मेरे द्वारा सामना की गई समस्या का सिर्फ एक समाधान है, और यह सबसे अच्छा होने का दावा नहीं करता है। मॉडल नामों को बेतरतीब ढंग से लिया जाता है; एक उदाहरण साइट पर टैग को लागू करने के लिए भी उपयुक्त हो सकता है। मैं टिप्पणियों और सुझावों के लिए बहुत आभारी रहूंगा, क्योंकि मुझे केवल 4 महीने के लिए डेंगू और अजगर से प्यार है।