📅 🙇🏿 🎁 उपयोगकर्ता लक्ष्यीकरण: क्षेत्र, शहर, सड़क 🐕 👩🏽‍🤝‍👨🏻 ⚓️

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

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

रूसी संघ के घटक संस्थाओं के लिए तैयार डेटाबेस की इंटरनेट खोज ने कोई विशेष परिणाम नहीं लाया - मुझे KLADR डेटाबेस मिला, लेकिन यह बहुत प्रासंगिक नहीं निकला। मैं आगे देख रहा हूं कि KLADR की मृत्यु के बाद मैं लड़खड़ा गया, लंबे समय तक FIAS रहा? । धन्यवाद sergpenza , अब वहाँ है जहाँ खुदाई करने के लिए!

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

मैं डेटाबेस को रिलेशनल व्यू में देखने की प्रक्रिया में नहीं गया - यह एक रूटीन है, और मेरी पोस्ट के नीचे तैयार डेटाबेस का लिंक है।

वहाँ उत्कृष्ट आधार। वेब के तहत इसके विज़ुअलाइज़ेशन के लिए एक इंटरफ़ेस बनाना आवश्यक है, इस भाग पर मैं और अधिक विस्तार से बताऊंगा।

इंटरफ़ेस में फ्रंट और बैक एंड शामिल हैं।

सामने का छोर html, js, jQuery है
MS से बैक-एंड MVC (c #)

सामने का छोर

कार्य: उपयोगकर्ता को अपने रहने की जगह के बारे में डेटा भरने में सक्षम होना चाहिए, इसके लिए वह क्रमिक रूप से क्षेत्र, शहर और सड़क में प्रवेश करेगा।

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

इस तरह के एक तंत्र को साइट पर सही स्थानों में जुड़े पुस्तकालय के रूप में सबसे अच्छा कार्यान्वित किया जाता है। Jquery.locateme.js लाइब्रेरी का नाम दें। पुस्तकालय के नाम से यह स्पष्ट है कि यह jQuery पर निर्भर है। प्रारंभ में, मुझे विचार था कि फ्रेमवर्क की विचारधारा के अनुसार jQuery के लिए एक प्लग-इन लिखना है, लेकिन अंत में मैंने इसे छोड़ दिया।

पुस्तकालय में निम्नलिखित कार्य होने चाहिए:

सभी डेटाबेस ऑब्जेक्ट्स (क्षेत्रों, शहरों, सड़कों) की खोज करें
खोज परिणामों का उत्पादन (सूची और स्वतः पूर्ण दोनों)
कीबोर्ड नियंत्रण (खोज परिणाम नेविगेशन)
कार्यक्षमता को स्केल करने के लिए सभी प्रकार की कॉलबैक को संभालना

कार्यान्वयन (कंकाल)

var locateMe = function (wrapperName, fieldName, fieldLabel, url, urlData, applyHandler, cancelHandler) { var _this = this, _urlData = urlData; this.isApplied = false; this.SearchInputLabel = $("<span>").addClass("label").attr("id", fieldName + "_label").html(fieldLabel); this.SearchInput = $("<input/>").addClass("input_search").attr("id", fieldName).attr("type", "text"); this.SearchInputTip = $("<input/>").addClass("input_search_tip").attr("id", fieldName + "_tip").attr("type", "text"); this.SearchResultsTipId = $("<input/>").attr("id", fieldName + "_tip_id").attr("type", "hidden"); this.SearchResults = $("<div>").addClass("results").attr("id", fieldName + "_results"); this.SearchUrl = url; return this; };

सार्वजनिक कार्य

 this.Reload = function (reloadValues) { if (reloadValues) { _this.SearchInput.val(""); _this.SearchInputTip.val(""); _this.SearchResultsTipId.val(""); _this.SearchResults.hide().empty(); } _methods.setResultsPosition(); }; this.Dispose = function () { this.isApplied = false; this.SearchInputLabel.remove(); this.SearchInput.unbind().remove(); this.SearchInputTip.remove(); this.SearchResultsTipId.remove(); this.SearchResults.unbind().remove(); _this = null; } this.Disable = function (setDisabled) { if (setDisabled) { this.SearchInput.val("").attr("disabled", "disabled"); this.SearchInputTip.val("").attr("disabled", "disabled"); this.SearchResultsTipId.val(""); this.SearchResults.empty().hide(); } else { this.SearchInput.removeAttr("disabled"); this.SearchInputTip.removeAttr("disabled"); } return this; }; this.AjaxRequestParameters = function (data) { _urlData = data; return _urlData; }; this.DefaultValue = function (id, val) { this.SearchResultsTipId.val(id); this.SearchInput.val(val); return this; }; this.Value = function () { return { k: _this.SearchResultsTipId.val(), v: _this.SearchInput.val() }; };

निर्माण और आंतरिक कार्यों को नियंत्रित करें

 var _methods = { setResultsPosition: function () { var inputOffset = _this.SearchInput.offset(), inputSize = _methods.objectWH(_this.SearchInput); _this.SearchResults .css("left", inputOffset.left) .css("top", inputOffset.top + inputSize.height - 2) .css("width", inputSize.width - 2); }, retrieveResults: function (query) { if (query && query.length > 0) { var _data = {}; if (_urlData && typeof (_urlData) === "object") { _data = _urlData, _data.searchquery = query; } else _data = { searchquery: query }; $.ajax({ async: true, url: _this.SearchUrl, type: "POST", data: _data, success: function (response) { _methods.fillResults(response); } }); } }, fillResults: function (arr) { _this.SearchResults.empty().hide(); _this.SearchInputTip.val(""); if (arr && arr.length > 1) { $(arr).each(function (i, o) { _this.SearchResults.append("<div class=\"row\" id=\"" + ok + "\">" + ov + "</div>"); }); _this.SearchResults .find("div") .unbind() .click(function () { $(this).addClass("selected"); _methods.resultsApply(); }).end() .css("height", arr.length * 19).show(); } else if (arr && arr.length == 1) { var searchInputValue = _this.SearchInput.val().length, arrayValue = arr[0].v, arrayKey = arr[0].k, tip = _this.SearchInput.val() + arrayValue.substring(searchInputValue, arrayValue.length); _this.SearchResultsTipId.val(arrayKey); _this.SearchInputTip.val(tip); } }, resultsMove: function (direction) { var currentPosition = -1, resultsCount = _this.SearchResults.find(".row").length - 1; $(_this.SearchResults.children()).each(function (i, o) { if ($(o).hasClass("selected")) { currentPosition = i; return; } }); if (direction == "up") { if (currentPosition > 0) { currentPosition--; _this.SearchResults .find("div.selected").removeClass("selected").end() .find("div:eq(" + currentPosition + ")").addClass("selected"); } } else { if (currentPosition < resultsCount) { currentPosition++; _this.SearchResults .find("div.selected").removeClass("selected").end() .find("div:eq(" + currentPosition + ")").addClass("selected"); } } }, resultsApply: function () { var selectedId = 0; if (_this.SearchResultsTipId.val() != "" || _this.SearchResults.find("div").length > 0) { if (_this.SearchResults.is(":visible")) { selectedId = _this.SearchResults.find(".selected").attr("id"); _this.SearchInput.val(_this.SearchResults.find(".selected").html()); _this.SearchInputTip.val(""); _this.SearchResultsTipId.val(selectedId); _this.SearchResults.empty().hide(); } else { selectedId = _this.SearchResultsTipId.val(); _this.SearchInput.val(_this.SearchInputTip.val()); _this.SearchInputTip.val(""); } if (!_this.isApplied) { if (applyHandler && typeof (applyHandler) === "function") { applyHandler(selectedId); } _this.isApplied = true; } } return selectedId; }, objectWH: function (obj) { var r = { width: 0, height: 0 }; r.height += obj.css("height").replace("px", "") * 1; r.height += obj.css("padding-top").replace("px", "") * 1; r.height += obj.css("padding-bottom").replace("px", "") * 1; r.height += obj.css("margin-top").replace("px", "") * 1; r.height += obj.css("margin-bottom").replace("px", "") * 1; r.height += obj.css("border-top-width").replace("px", "") * 1; r.height += obj.css("border-bottom-width").replace("px", "") * 1; r.width += obj.css("width").replace("px", "") * 1; r.width += obj.css("padding-left").replace("px", "") * 1; r.width += obj.css("padding-right").replace("px", "") * 1; r.width += obj.css("margin-left").replace("px", "") * 1; r.width += obj.css("margin-right").replace("px", "") * 1; r.width += obj.css("border-left-width").replace("px", "") * 1; r.width += obj.css("border-right-width").replace("px", "") * 1; return r; } }; var target = $("." + wrapperName); if (target.length > 0) { target .append(this.SearchInputLabel) .append(this.SearchInput) .append(this.SearchInputTip) .append(this.SearchResultsTipId) .append(this.SearchResults); $(window) .resize(function () { _methods.setResultsPosition(); }) .trigger("resize"); this.SearchInput .keydown(function (e) { var val = _this.SearchInput.val(), valLength = val.length; if (e.which > 32 && e.which != 40 && e.which != 38 && e.which != 9 && e.which != 39 && e.which != 46 && e.which != 13) { return true; } else if (e.which == 8 || // [Backspace] e.which == 46) { // [DELETE] if ((valLength - 1) > 0) { _methods.retrieveResults(val.substring(0, valLength - 1)); } if (_this.isApplied) { _this.isApplied = false; _this.SearchResultsTipId.val(""); if (cancelHandler && typeof (cancelHandler) === "function") { cancelHandler(); } } } else if (e.which == 40) { //▼ _methods.resultsMove("down"); } else if (e.which == 38) { //▲ _methods.resultsMove("up"); } else if (e.which == 39) { //→ _methods.resultsApply(); } else if (e.which == 9) { //TAB _methods.resultsApply(); return false; } else if (e.which == 13) { //ENTER _methods.resultsApply(); } }) .keypress(function (e) { var text = _this.SearchInput.val(), pressedChar = String.fromCharCode(e.which || e.keyCode), query = text + pressedChar; _methods.retrieveResults(query); }); }

निम्नानुसार पृष्ठ पर नियंत्रण का उपयोग करें

 var region = new locateMe("field_wrapper", "field_name", "field_label", "search_URL", search_URL_DATA, applyHandler, cancelHandler);

field_wrapper - वर्ग चयनकर्ता, शेल जिसमें नियंत्रण बनाया जाएगा

field_name - नियंत्रण क्षेत्र का नाम

field_label - खोज के साथ फ़ील्ड के ऊपर क्या लिखा जाएगा

search_URL - वह URL जो खोज के लिए अनुरोध किया जाएगा (POST विधि)

[search_URL_DATA] - वैकल्पिक पैरामीटर search_URL (ऑब्जेक्ट) को पारित कर दिया गया

[applyHandler] - फ़ंक्शन, फ़ील्ड में खोज पूरी होने के बाद कहा जाएगा

[कैंसलहैंडलर] - फ़ंक्शन, जिसे क्षेत्र में परिवर्तन कहा जाता है (जब तक, निश्चित रूप से, खोज पूरी हो गई थी)

एक उदाहरण:

 var region = new locateMe("uloc_region", "region", "", "/region", null, function(selectedId){ alert(" ID:" + selectedId); });

उदाहरण में, "div" .uloc_region "क्षेत्र" नाम के साथ एक फ़ील्ड बनाया जाता है। खोज करने के लिए, मापदंडों के बिना यूआरएल "/ क्षेत्र" का अनुरोध किया जाएगा, और वांछित क्षेत्र खोजने के बाद, "क्षेत्र आईडी:% क्षेत्र%" पाठ के साथ एक चेतावनी दिखाई देती है।

वापस अंत

उद्देश्य: किसी भी डेटाबेस ऑब्जेक्ट (क्षेत्र, शहर या सड़क) के लिए उपयोगकर्ता की खोज क्वेरी को संतुष्ट करने वाले फ़ील्ड के डेटाबेस से चयन को लागू करना

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

समाधान की वास्तुकला (समाधान, .sln) में 4 पुस्तकालय शामिल हैं:

BO (BusinesObjects)
डीसी (डेटाकोटेक्स्ट)
DP (DataProvider)
LocateMe (UI, वेब इंटरफ़ेस)

बीओ, डीसी, डीपी का वर्णन करने का कोई मतलब नहीं है, क्योंकि वे विशिष्ट (लाइनक, डीटीओ, डेटाबेस संदर्भ) हैं। पोस्ट के अंत में संपूर्ण समाधान के साथ संग्रह से लिंक करें।

यूआई के लिए, इसे सामान्य शब्दों में माना जा सकता है। अर्थात्, खोज विधियों के हस्ताक्षर

  [HttpPost] public JsonResult Region(string searchquery) { return Json(from i in Database.SearchRegions(searchquery, 5) select new { k = i.Id, v = i.Region }); } [HttpPost] public JsonResult City(int regionId, string searchquery) { return Json(from i in Database.SearchCities(regionId, searchquery, 5) select new { k = i.Id, v = i.City }); } [HttpPost] public JsonResult Street(long cityId, string searchquery) { return Json(from i in Database.SearchStreets(cityId, searchquery, 5) select new { k = i.Id, v = i.Street }); }

यह सरल है: तीन डेटाबेस ऑब्जेक्ट के लिए 3 विधियाँ। प्रत्येक खोजकर्ता स्ट्रिंग लेता है, जो उपयोगकर्ता की खोज क्वेरी है। अंतिम दो विधियों में एक और पैरामीटर है RegionalId और CityId - वे संकेत देते हैं कि किस क्षेत्र (या शहर) में खोज करनी है। खोज परिणाम 5 प्रविष्टियों तक सीमित हैं। JSON में क्रमांकित एक अनाम प्रकार का उपयोग लौटे ऑब्जेक्ट के रूप में किया जाता है, जहां v क्षेत्र / शहर का नाम है

या सड़कों, और कश्मीर उनके पहचानकर्ता हैं।

यहां डेमो करें

परियोजना (पूर्ण रूप से) यहां (गीथूब)

उसी स्थान पर बेस (डंप)

लिंक, विवरण, निर्देश

डेटाबेस सर्वर के रूप में - एमएस SQL 2012

डेटाबेस 2014 की प्रासंगिकता, मैं तिमाही। क्रीमिया और सेवस्तोपोल के नए क्षेत्रों, साथ ही बैकोनूर के क्षेत्र मौजूद हैं

बैक-एंड .Net 4.0, एमएक्स 3

बेस फ़ाइल (mdf, लॉग) tyk (यह गिटहब के लिए शुरू नहीं हुआ है, शायद आकार बड़ा है)

युपीडी

धन्यवाद WindDrop , Andriyan

फिक्स्ड \ Add:

1. मैन्युअल प्रविष्टि या ऑटो-पूर्ण के बाद बार-बार [ENTER], [TAB] या [सही तीर] दबाने

2. केस-संवेदी ऑटो-पूर्ति (केस सेंसिटिविटी)

3. खाली क्षेत्र के साथ खोज परिणामों के साथ एक विंडो प्रदर्शित करना

4. क्षेत्र क्षेत्र ("बाशको ..." या "बाशको ....") में एक मनमाना भरने का एक ही परिणाम होगा (डेटाबेस को बदले बिना)

निश्चित नहीं:

एफएफ में अस्पष्ट पुस्तकालय व्यवहार (कीस्ट्रोक्स)

उपयोगकर्ता लक्ष्यीकरण: क्षेत्र, शहर, सड़क

सामने का छोर

वापस अंत

युपीडी

More articles: