🔔 🌥️ 🎣 उन्नत रूप - ऑटो-पूर्ण के साथ बहु का चयन करें 👛 🔰 🗞️

हमारे उपयोगकर्ता एयरलाइनों और सस्ती उड़ानों के विशेष प्रस्तावों का पालन करते हैं, हर कोई उनकी दिशा, प्रस्थान और आगमन बिंदुओं में रुचि रखता है - हजारों, उपयोगकर्ता एक साथ कई शहरों, देशों या क्षेत्रों की निगरानी करना चाहते हैं। एक कार्य था - एक सुविधाजनक सदस्यता तंत्र कैसे प्रदान करें? मल्टी सिलेक्ट में एक लंबे प्रहार के बिना, बटन "प्रस्थान बिंदु जोड़ें" के बिना। जवाब इस तरह दिखता है -

समाधान फेसबुक और संपर्क से नियंत्रण था - उपयोगकर्ता इससे परिचित हैं, जिसका अर्थ है कि यह समझाने की आवश्यकता नहीं है कि यह कैसे काम करता है। यह django के साथ इसे पार करने के लिए बनी हुई है।

यह नियंत्रण कई मामलों के लिए उपयुक्त है जब आपको एक बड़ी सूची से चयन करने की आवश्यकता होती है - सैकड़ों या हजारों तत्व।

एक जीवंत उदाहरण एयरलाइन शेयरों पर नज़र रखने के लिए शहरों को चुनने के रूप में है ।

उपयोगकर्ता की ओर से, हम www.emposha.com/javascript/fcbkcomplete.html पर उपलब्ध रेडीमेड जेकरी प्लग-इन का उपयोग करते हैं, इसे डाउनलोड करते हैं और मीडिया फ़ोल्डर (मेरे मामले में, मीडिया / सीएसएस और मीडिया / जेएस) में सीएसएस और जेएस डालते हैं।

प्रपत्र कोड को foms.py में जोड़ें-

class MultiOriginSelect (forms . SelectMultiple): class Media : css = { 'all' : ( '/media/css/fcbkinput.css' ,) } js = ( '/media/js/jquery.fcbkcomplete.js' ) class SubscriptionFilterForm (forms . Form): CHOICES = [] ........ orgs = forms . MultipleChoiceField(widget = MultiOriginSelect, choices = CHOICES, required = False , initial = []) dsts = forms . MultipleChoiceField(widget = MultiOriginSelect, choices = CHOICES, required = False , initial = []) ........ def __init__ ( self , * args, ** kwargs): super (SubscriptionFilterForm, self ) . __init__( * args, ** kwargs) fcbkcomplete_fields = [ u'orgs' , u'dsts' ] for field in fcbkcomplete_fields: # check whether we have init parameters if args: loc_list = args[ 0 ] . getlist(field) ..... # generate dynamic choices for fcbk fields from args, like [id, name] self . fields[field] . choices = ([( int (o), name(o)) for o in loc_list] )

अंतिम पंक्ति मुख्य एक है, यदि फॉर्म में आरंभीकरण मान हैं, तो विकल्पों में भरें।

फ़ॉर्म के साथ HTML फ़ाइल में, नियंत्रणों के आरंभ को जोड़ें:

<head> <script> $( document ).ready( function (){ $( "#id_orgs, #id_dsts" ).fcbkcomplete({ json_url : '/subscribe_autocomplete' , first_selected : false , filter_hide : true , filter_case : false , complete_text : "Enter country, city or airport." , maxitems : 100 }); }); </script> </head> <body> .... <form> ...... {{form.orgs}} {{form.dsts}} <input type = "submit" > </form> ...... </body>

काम करने के लिए स्वत: पूर्ण होने के लिए, हम एक ऐसा दृश्य जोड़ते हैं जो आवश्यक जंक्सन उत्पन्न करेगा। हमारे मामले में, यह - / subscribe_autocomplete पर स्थित है। तो जोड़ो - to urls.py:

..... 
      

        
        
        
      

     url(r'^subscribe_autocomplete', subscribe_autocomplete, name='subscribe_autocomplete'), 
      

        
        
        
      

     .....

विचारों में:

def subscribe_autocomplete (request): q = request . GET . get( 'tag' , '' ) # skip too short requests if len (q) <3 : return HttpResponse( '' ) # filter any instances according to tag qr = Objects . objects . filter(Q( .... )) #generate json #message format - [{"caption":"London", "value":4}] s =[...]; return HttpResponse(s)

अब हमारे पास काम करने वाले पेज पर एक फॉर्म है और पोस्ट अनुरोध (फ़ॉर्म = SubscriptionFilterForm (request.POST)) से पूर्ण रूप से सफलतापूर्वक उत्पन्न होता है

एक मॉडल से एक फॉर्म उत्पन्न करने के लिए - मैं एक अलग फ़ंक्शन का उपयोग करता हूं (मेरे मामले में, ModelForm फिट नहीं हुआ)

def subs_form_from_model (s): src_d = {} src_d[ 'subscriptionemail' ] = s . email ,,,, qd = django . http . QueryDict( '' ) qd = qd . copy() # to make muttable qd . update(src_d) # fill form fields qd . setlist( 'orgs' , [ unicode (o . id) for o in s . orgs . all()]) qd . setlist( 'dsts' , [ unicode (d . id) for d in s . dsts . all()]) # create form form = SubscriptionFilterForm(qd) .......... return form </ code >

अधिकांश उपयोगकर्ता पहले से भरे हुए क्षेत्र (जियो आईपी द्वारा) को देखते हैं और समझते हैं कि क्या है।

बड़े क्षेत्रों के लिए व्यवस्थापक पैनल में एक ही फॉर्म (और चाहिए) का उपयोग किया जा सकता है।

PS और इसलिए दो बार उठना नहीं है - अगर आपको बीटरूट पसंद है (या आप पहले से ही हमारी खोज और मेलिंग सूची का उपयोग कर रहे हैं) - हम एक कुशल टाइपसेटर और एक्रोबेट जेएसए के साथ बात करके खुश होंगे।

उन्नत रूप - ऑटो-पूर्ण के साथ बहु का चयन करें

More articles: