🕋 🧑🏽‍🤝‍🧑🏼 🎾 पता बनाना अधिक आकर्षक बनाता है 🧛🏼 🐜 👃🏽

हमारी कंपनी के काम के मुख्य क्षेत्रों में से एक ग्राहक डेटा की सफाई और मानकीकरण है। हमारा सॉफ़्टवेयर ग्राहक की जानकारी के साथ किसी भी डेटाबेस को व्यवस्थित कर सकता है: त्रुटियों और टाइपो को सही करना, गुम जानकारी भरना, अतिरिक्त जानकारी के साथ डेटा को समृद्ध करना, डुप्लिकेट को समाप्त करना।

दुर्भाग्य से, एक एकल सफाई अक्सर पर्याप्त नहीं होती है: आपको भविष्य में डेटाबेस में खराब और अपूर्ण डेटा को रोकने की आवश्यकता होती है। इस समस्या को हल करने के लिए, एक टूलटिप सेवा विकसित की गई थी, जिसे हमने पहले लिखा था । प्रारंभ में, संकेत उन ऑपरेटरों के लिए थे, जिन्हें बड़ी संख्या में पते दर्ज करने होते हैं, और उनके काम को गति देने और त्रुटियों की संख्या को कम करने के लिए डिज़ाइन किया गया था।

हालांकि, बाद में हमने महसूस किया कि यह सेवा उन सभी के लिए उपयोगी हो सकती है जो किसी तरह क्लाइंट डेटा के साथ काम करते हैं। नीचे मैं यह दिखाने की कोशिश करूंगा कि युक्तियाँ क्या कर सकती हैं, और आपकी साइट पर प्रवेश करने के तरीके को एक सुविधाजनक और बहुत ही सरल प्रक्रिया है।

हर कोई जानता है कि पता भरने का तरीका क्या है: बहुत सारे क्षेत्र और उन्हें भरने में बिताया गया समय। लेकिन असली समस्याएं तब शुरू होती हैं जब वेबमास्टर फॉर्म में सत्यापन जोड़ता है। सबसे लोकप्रिय विकल्पों में से एक 100,500+ वस्तुओं की सूची और निर्देशिका के साथ डेटा अनुपालन के लिए एक कठिन जांच है।

उदाहरण के लिए, पिछले हफ्ते, जब हम एक प्रसिद्ध साइट पर पिज्जा ऑर्डर करना चाहते थे, तो एक पते में प्रवेश करने की प्रक्रिया अचानक एक अद्भुत खोज में बदल गई। सबसे पहले, हमने गली में प्रवेश करने के लिए एक मैदान देखा, "तुरचानोव लेन" का संकेत दिया और, एक गंदी चाल की उम्मीद न करते हुए, "जारी रखें" पर क्लिक किया:

व्यान ने "तुर्चिनोव", "तुर्चिनोव प्रति", "प्रति तुर्चिनोव", "तुरचानोव" को पेश करने का प्रयास भी असफल रहा। ईमानदार होने के लिए, मैं इसे कहीं और ऑर्डर करना चाहता था। लेकिन जिस चीज को हमने शुरू किया था उसे खत्म करने के लिए दिलचस्पी ने आक्रोश पैदा कर दिया, और, परिणामस्वरूप, हमने कार्यालय के पास एक प्रमुख सड़क का नाम दर्ज किया और "ओके" पर क्लिक किया।

हां, यह सड़क के नाम के साथ एक मोडल विंडो है। "जारी रखें" पर क्लिक करें और हम घर में प्रवेश कर सकते हैं।

इस गली में कोई दूसरा घर नहीं है, बेशक। उन्होंने हमारे लिए सबसे करीबी को चुना, आदेश में टिप्पणियों में सही पते का संकेत दिया और जश्न मनाने के लिए 5 मिनट खर्च करते हुए जश्न मनाने चले गए।

यह कैसे करना है, इसका एक बड़ा उदाहरण आवश्यक नहीं है।

और एक फॉर्म कैसे बनाएं जो सुविधाजनक होगा? उदाहरण के लिए, मॉस्को सरकार के इंटरनेट रिसेप्शन से संपर्क करने के लिए पेज:

सिद्धांत रूप में, फ़ॉर्म भरने का एक अच्छा तरीका (यदि आपके पास खाली समय है): बहुत सारे अलग-अलग क्षेत्र, आप इस बारे में उलझन में नहीं हैं कि क्या दर्ज करना है, और कोई कष्टप्रद मान्यता नहीं है। सच है, टैबलेट और फोन पर खेतों के माध्यम से कूदना बहुत सुविधाजनक नहीं है। और थोड़ा डरा हुआ।

आप फ़ॉर्म को कई पृष्ठों में विभाजित कर सकते हैं: इस तरह यह कम लोड हो जाएगा। लेकिन यह कुल भरने के समय को कम नहीं करेगा, इसलिए हम एक अलग तरीके से जाएंगे।

हम इसे डिज़ाइन करना आसान बनाने के लिए पृष्ठ को प्रोटोटाइप में स्थानांतरित करेंगे:

सवाल तुरंत उठता है: क्या मैं एक क्षेत्र में पते की जानकारी को निचोड़ सकता हूं? या कई तत्वों में विभाजित करना आवश्यक है?

सबसे अधिक संभावना है, अलग-अलग पते के लिए अलग-अलग अधिकारी जिम्मेदार होते हैं, साथ ही बाद के विश्लेषणों के लिए घटकों द्वारा पते के टूटने को बनाए रखना अच्छा होगा। हालांकि, कोई भी हमें एक क्षेत्र में जानकारी दर्ज करने के लिए मना नहीं करता है, और फिर इसे अपने घटकों में वितरित करता है। मुख्य पता इनपुट फ़ील्ड जोड़ें और संकेतों को इससे कनेक्ट करें:

कोड उदाहरण: टूलटिप्स को टेक्स्ट फ़ील्ड के पते पर कनेक्ट करें

<div class="form-group"> <label for="address"></label><span class="required"> </span> <input type="text" class="form-control" id="address" placeholder="     ( )"> </div>

 $("#address").suggestions({ serviceUrl: DADATA_API_URL + "/suggest/address", token: TOKEN, selectOnSpace: true });

अब हम अतिरिक्त जानकारी को हटा देते हैं, और आवश्यक को दो लाइनों में विभाजित करते हैं - एक शहर के साथ एक क्षेत्र और एक घर के साथ एक गली। उसी समय, हम सूची के बोध को आसान बनाने के लिए उपयोगकर्ता द्वारा दर्ज किए गए वर्णों को उजागर करते हैं:

कोड उदाहरण: संकेत सूची के लिए कस्टम स्वरूपण

 /*      */ .autocomplete-suggestions strong { color: #3399FF; font-weight: normal; }

 $("#address").suggestions({ serviceUrl: DADATA_API_URL + "/suggest/address", token: TOKEN, selectOnSpace: true, formatResult: self.formatResult }); /** *       . *         . * @param suggestion  * @param currentValue    * @returns {string} HTML     */ formatResult: function (suggestion, currentValue) { var address = suggestion.data; //   - , ,  var part1 = join([ address.region, join([address.area_type, address.area], " "), join([address.city_type, address.city], " ") ]); //   -  ,    var part2 = join([ join([address.settlement_type, address.settlement], " "), join([address.street_type, address.street], " "), join([address.house_type, address.house], " ") ]); //     var pattern = '(^|\\s+)(' + $.Suggestions.utils.escapeRegExChars(currentValue) + ')'; part2 = part2.replace(new RegExp(pattern, 'gi'), '$1<strong>$2<\/strong>') var suggestedValue = part2 ? "<span class=\"autocomplete-suggestion-region\">" + part1 + "</span>" + "<br>  " + part2 : part1; return suggestedValue; }

सबसे पहले, संकेत शहर और क्षेत्र द्वारा जानकारी लौटाते हैं, फिर सड़क से, फिर घर से। मॉस्को और सेंट पीटर्सबर्ग एक प्राथमिकता है। हम मास्को सरकार के लिए एक फॉर्म बना रहे हैं, इसलिए हम मास्को में से एक में खोज को सीमित करेंगे:

कोड उदाहरण: हम रूस के एक विशिष्ट क्षेत्र में खोज को प्रतिबंधित करते हैं

 $("#address").suggestions({ serviceUrl: DADATA_API_URL + "/suggest/address", token: TOKEN, selectOnSpace: true, onSearchStart: self.forceMoscow, formatResult: self.formatResult }); /** *    * @param params  ajax- */ forceMoscow: function (params) { var query = params["query"]; var pattern = //i; if (!pattern.test(query)) { query = " " + query; } params["query"] = query; }

स्क्रॉल को प्रदर्शित होने से रोकने के लिए, हम पहले 10 में से 7 युक्तियां दिखाएंगे (वे प्रासंगिकता के आधार पर क्रमबद्ध हैं, इसलिए खोज की गुणवत्ता को नुकसान नहीं होगा):

कोड उदाहरण: संकेतों की सूची को फ़िल्टर करना

 $("#address").suggestions({ serviceUrl: DADATA_API_URL + "/suggest/address", token: TOKEN, selectOnSpace: true, maxHeight: 310, onSearchStart: self.forceMoscow, onSearchComplete: self.trimResults, formatResult: self.formatResult }); /** *    * @param query    * @param suggestions      */ trimResults: function (query, suggestions) { suggestions.splice(7,3); suggestions.forEach(function(suggestion) { suggestion.value = suggestion.value.replace(", ", ""); }) }

जब उपयोगकर्ता सूची से एक विशिष्ट विकल्प का चयन करता है, तो हम चयनित मान को "पता" में रखते हैं, और शेष प्रपत्र फ़ील्ड में दानेदार पते फ़ील्ड को प्रतिस्थापित करते हैं:

कोड उदाहरण: स्वचालित रूप से चयनित टूलटिप से पता भरें

 $("#address").suggestions({ serviceUrl: DADATA_API_URL + "/suggest/address", token: TOKEN, selectOnSpace: true, maxHeight: 310, onSearchStart: self.forceMoscow, onSearchComplete: self.trimResults, formatResult: self.formatResult, onSelect: function(suggestion) { if (suggestion.data) { this.value = self.formatSelected(suggestion); self.showSelected(suggestion); } } }); /** *          * @param suggestion   */ showSelected: function (suggestion) { var address = suggestion.data; $("#address-postal_code").val(address.postal_code); $("#address-region").val( join([address.region_type, address.region], " ") ); $("#address-city").val(join([ join([address.area_type, address.area], " "), join([address.city_type, address.city], " "), join([address.settlement_type, address.settlement], " ") ])); $("#address-street").val( join([address.street_type, address.street], " ") ); $("#address-house").val( join([address.house_type, address.house], " ") ); } //    ? //      http://hh.ru/employer/15589

चूंकि सभी फ़ील्ड अब स्वचालित रूप से भरे हुए हैं, हम पते के भाग को अधिक संक्षिप्त बना सकते हैं:

सादृश्य से, हम नाम करते हैं और इस फ़ीडबैक फॉर्म को प्राप्त करते हैं:

आप डेमो पेज ( जीथूब पर स्रोत कोड ) पर लाइव देख सकते हैं।

परिणामी रूप में वेबमास्टर से न्यूनतम लागत की आवश्यकता होती है, जो उपयोगकर्ता के लिए सुविधाजनक है, कंप्यूटर और टैबलेट या फोन दोनों पर इनपुट के लिए उपयुक्त है।

क्या आप कल्पना कर सकते हैं कि क्या हर साइट: टिकट खरीदते समय, ऑनलाइन स्टोर में ऑर्डर देना या पंजीकरण फॉर्म भरना - क्या ऐसी सरल प्रक्रिया प्रवेश प्रक्रिया थी? यदि किसी उपकरण से फ़ॉर्म भरना संभव के रूप में सुविधाजनक था और इसमें केवल 5-10 सेकंड लगते हैं?

हमारा सुझाव है कि अब दुनिया को एक बेहतर जगह बनाना शुरू करें! सेवा से कनेक्ट करें और प्रयास करें, उपयोगकर्ताओं की प्रतिक्रिया देखें, / b परीक्षण करें। और अपने ग्राहकों के साथ शुभकामनाएँ!

एलेक्सजेकिस के माध्यम से

पता बनाना अधिक आकर्षक बनाता है

More articles: