{"id":194018,"date":"2013-09-17T02:20:03","date_gmt":"2013-09-16T22:20:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=194018"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=194018","title":{"rendered":"<span class=\"post_title\">\u0414\u0435\u043b\u0430\u0435\u043c \u0444\u043e\u0440\u043c\u0443 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0430\u0434\u0440\u0435\u0441\u0430<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t\u0421\u0435\u0433\u043e\u0434\u043d\u044f, \u0432 \u0434\u0435\u043d\u044c \u0440\u0435\u043b\u0438\u0437\u0430 \u043d\u043e\u0432\u043e\u0433\u043e jQuery \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0438\u0441\u0430 <a href=\"http:\/\/kladr-api.ru\">\u041a\u041b\u0410\u0414\u0420 \u0432 \u043e\u0431\u043b\u0430\u043a\u0435<\/a>, \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0430\u0434\u0440\u0435\u0441\u0430 \u0441 \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0435\u0439.<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/c6e\/7ee\/4f3\/c6e7ee4f39834ef2cf69de8da3aea571.png\"\/><br \/>  <a name=\"habracut\"><\/a><\/p>\n<p>  \u0414\u043b\u044f \u043d\u0435\u0442\u0435\u0440\u043f\u0435\u043b\u0438\u0432\u044b\u0445: \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0444\u043e\u0440\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 <a href=\"https:\/\/github.com\/garakh\/kladrapi-jsclient\/blob\/master\/examples\/example5.html\">\u0433\u0438\u0442\u0445\u0430\u0431\u0435<\/a>. \u0414\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0435\u0433\u043e \u0432 zip \u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p>  \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0432 \u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0435 \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0444\u0438\u0447\u0430\u0445:<\/p>\n<ul>\n<li> \u041c\u044b \u0438\u0437\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>jquery.ui.autocomplete<\/code>. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043b\u0430\u0433\u0438\u043d \u0441\u0443\u043c\u043c\u0430\u0440\u043d\u043e \u0432\u0435\u0441\u0438\u0442 13 \u041a\u0431\u0430\u0439\u0442 \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043a\u0440\u043e\u043c\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e jQuery.<\/li>\n<li>\u041f\u043b\u0430\u0433\u0438\u043d \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 2 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439: \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0441\u0435\u0440\u0432\u0438\u0441\u0443 (<a href=\"https:\/\/github.com\/garakh\/kladrapi-jsclient\/blob\/master\/kladr\/jquery.kladr.core.min.js\">\u0433\u0438\u0442\u0445\u0430\u0431<\/a>) \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f (<a href=\"https:\/\/github.com\/garakh\/kladrapi-jsclient\/blob\/master\/kladr\/jquery.kladr.plugin.min.js\">\u0433\u0438\u0442\u0445\u0430\u0431<\/a>). \u042d\u0442\u043e \u0434\u0430\u0451\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/li>\n<li>\u0412 \u043f\u043b\u0430\u0433\u0438\u043d\u0435 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043c\u044b \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u043b\u0438\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b: \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0441\u0442\u0438 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0430\u0434\u0440\u0435\u0441\u0430, ajax-\u043a\u0440\u0443\u0442\u0438\u043b\u043a\u0443.<\/li>\n<\/ul>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043b\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0440\u0435\u0437\u044e\u043c\u0435 \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0439 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0444\u043e\u0440\u043c\u0435. \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/p>\n<pre><code class=\"html\">&lt;link href=&quot;..\/jquery.kladr.min.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;link href=&quot;css\/example5.css&quot; rel=&quot;stylesheet&quot;&gt;  &lt;script src=&quot;js\/lib\/jquery-1.10.2.min.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt; &lt;script src=&quot;..\/jquery.kladr.min.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt; &lt;script src=&quot;js\/example5.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt; <\/code><\/pre>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u0446\u0435\u043b\u044c\u044e \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u0441\u0442\u0438\u043b\u0435\u0432\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0444\u043e\u0440\u043c \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043a\u043e\u0434 html \u0438 css<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">HTML<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text\/html; charset=utf-8&quot;&gt;         &lt;title&gt;\u0424\u043e\u0440\u043c\u0430 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0430\u0434\u0440\u0435\u0441\u0430&lt;\/title&gt;          &lt;link href=&quot;..\/jquery.kladr.min.css&quot; rel=&quot;stylesheet&quot;&gt;         &lt;link href=&quot;css\/example5.css&quot; rel=&quot;stylesheet&quot;&gt;          &lt;script src=&quot;js\/lib\/jquery-1.10.2.min.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;         &lt;script src=&quot;..\/jquery.kladr.min.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;         &lt;script src=&quot;js\/example5.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;     &lt;\/head&gt;     &lt;body&gt;         &lt;form&gt;             &lt;div class=&quot;field&quot;&gt;                 &lt;label&gt;\u0420\u0435\u0433\u0438\u043e\u043d&lt;\/label&gt;                 &lt;input type=&quot;text&quot; name=&quot;region&quot;&gt;             &lt;\/div&gt;             &lt;div class=&quot;field&quot;&gt;                 &lt;label&gt;\u0420\u0430\u0439\u043e\u043d&lt;\/label&gt;                 &lt;input type=&quot;text&quot; name=&quot;district&quot;&gt;             &lt;\/div&gt;             &lt;div class=&quot;field&quot;&gt;                 &lt;label&gt;\u0413\u043e\u0440\u043e\u0434&lt;\/label&gt;                 &lt;input type=&quot;text&quot; name=&quot;city&quot;&gt;             &lt;\/div&gt;             &lt;div class=&quot;field&quot;&gt;                 &lt;label&gt;\u0423\u043b\u0438\u0446\u0430&lt;\/label&gt;                 &lt;input type=&quot;text&quot; name=&quot;street&quot;&gt;             &lt;\/div&gt;             &lt;div class=&quot;field&quot;&gt;                 &lt;label&gt;\u0414\u043e\u043c&lt;\/label&gt;                 &lt;input type=&quot;text&quot; name=&quot;building&quot;&gt;             &lt;\/div&gt;             &lt;div class=&quot;tooltip&quot; style=&quot;display: none;&quot;&gt;&lt;b&gt;&lt;\/b&gt;&lt;span&gt;&lt;\/span&gt;&lt;\/div&gt;         &lt;\/form&gt;     &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">CSS<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"css\">body, input {     color: #555;     font-size: 13px;     font-family: Helvetica, Arial, sans-serif; } form {     width: 300px;     margin: 40px auto 0;     padding: 20px 20px 10px;     border-radius: 5px;     border: 1px solid #e1e1e8;     background-color: #f7f7f9;     box-shadow: rgba(0,0,0,0.075) 2px 3px 7px; } input, button {     outline: none; } .field label {     display: inline-block;     width: 80px;     vertical-align: middle; } .field {     margin-bottom: 10px;     padding: 0; } .field input {     height: 2em;     min-width: 196px;     border-radius: 3px;     border: 1px solid #d3d3d3;     box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);     padding: 0 7px;     color: #666; } .tooltip {     position: absolute;     top: 16px;     left: 360px;     width: 220px;     color: #b94a48;     padding: 8px 10px;     border-radius: 5px;     border: 1px solid #eed3d7;     background-color: #f2dede;     opacity: 0.8; } .tooltip b {     position: absolute;     display: block;     left: -14px;     width: 0;     height: 0;     color: transparent;     border: 7px solid;     border-right-color: #f2dede; } #kladr_autocomplete ul {     border-radius: 4px;     border-color: #d3d3d3;     padding: 0;     background-color: #fff; } #kladr_autocomplete li {     padding: 6px 8px;     border: none;     border-bottom: 1px solid #ededed;     background-color: transparent; } #kladr_autocomplete ul .active {     border: none;     border-bottom: 1px solid  #f0f0f0;     background-color: #f0f0f0;     margin-top: -1px;     padding-top: 7px; } #kladr_autocomplete ul li:first-child.active {     padding-top: 6px;     margin-top: 0; } #kladr_autocomplete li strong {     color: #5499BB; } #kladr_autocomplete .spinner {     background-image: url(&quot;..\/img\/spinner.png&quot;);     width: 16px;     height: 16px; } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u0430\u044f \u0432\u043e\u0442 \u0444\u043e\u0440\u043c\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/d15\/eaa\/875\/d15eaa875cfc32bbd89abec729c56f92.png\"\/><\/p>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0435\u0439.<br \/>  \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c example5.js.<br \/>  \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0442\u043e\u043a\u0435\u043d, \u043a\u043b\u044e\u0447 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0431\u0443\u0434\u0435\u043c \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.<\/p>\n<pre><code class=\"javascript\">$(function() {     var token = '51dfe5d42fb2b43e3300006e';     var key   = '86a2c2a06f1b2451a87d05512cc2c3edfdf41969';      var region   = $('[name=&quot;region&quot;]');     var district = $('[name=&quot;district&quot;]');     var city     = $('[name=&quot;city&quot;]');     var street   = $('[name=&quot;street&quot;]');     var building = $('[name=&quot;building&quot;]'); }); <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0438\u0437 \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u043d\u0430\u043c \u0432 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435.<\/p>\n<pre><code class=\"javascript\">region.kladr({     token: token,     key: key,     type: $.kladr.type.region });  district.kladr({     token: token,     key: key,     type: $.kladr.type.district });  city.kladr({     token: token,     key: key,     type: $.kladr.type.city });  street.kladr({     token: token,     key: key,     type: $.kladr.type.street });  building.kladr({     token: token,     key: key,     type: $.kladr.type.building }); <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0439\u043e\u043d\u043e\u0432 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u043e\u0441\u044c \u0438\u0437 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0433\u0438\u043e\u043d\u0430 \u0438 \u0442.\u0434. \u0437\u0430\u0434\u0430\u0451\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u043d\u0438\u0436\u0435\u0441\u0442\u043e\u044f\u0449\u0438\u0445 \u043f\u043e\u043b\u0435\u0439 \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435.<\/p>\n<pre><code class=\"javascript\">region.kladr({     select: function(obj) {         region.parent().find('label').text(obj.type);         district.kladr('parentType', $.kladr.type.region);         district.kladr('parentId', obj.id);         city.kladr('parentType', $.kladr.type.region);         city.kladr('parentId', obj.id);     } });  district.kladr({     select: function(obj) {         district.parent().find('label').text(obj.type);         city.kladr('parentType', $.kladr.type.district);         city.kladr('parentId', obj.id);     } });  city.kladr({     select: function(obj) {         city.parent().find('label').text(obj.type);         street.kladr('parentType', $.kladr.type.city);         street.kladr('parentId', obj.id);         building.kladr('parentType', $.kladr.type.city);         building.kladr('parentId', obj.id);     } });  street.kladr({     select: function(obj) {         street.parent().find('label').text(obj.type);         building.kladr('parentType', $.kladr.type.street);         building.kladr('parentId', obj.id);     } });  building.kladr({     select: function(obj) {         building.parent().find('label').text(obj.type);     } }); <\/code><\/pre>\n<p>  \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 (\u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439 \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435, \u0430 \u0432\u0432\u0435\u0434\u0451\u0442 \u0435\u0433\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e).<\/p>\n<pre><code class=\"javascript\">var tooltip  = $('.tooltip');  var ShowError = function(input, message){     tooltip.find('span').text(message);      var inputOffset = input.offset();     var inputWidth  = input.outerWidth();     var inputHeight = input.outerHeight();      var tooltipHeight = tooltip.outerHeight();      tooltip.css({         left: (inputOffset.left + inputWidth + 10) + 'px',         top: (inputOffset.top + (inputHeight - tooltipHeight)\/2 - 1) + 'px'     });      tooltip.show(); };  region.kladr({     verify: true,     check: function(obj) {         if(obj){             region.parent().find('label').text(obj.type);             district.kladr('parentType', $.kladr.type.region);             district.kladr('parentId', obj.id);             city.kladr('parentType', $.kladr.type.region);             city.kladr('parentId', obj.id);         } else {             ShowError(region, '\u041d\u0435\u0432\u0435\u0440\u043d\u043e \u0432\u0432\u0435\u0434\u0435\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0433\u0438\u043e\u043d\u0430');         }     } });  district.kladr({     verify: true,     check: function(obj) {         if(obj){             district.parent().find('label').text(obj.type);             city.kladr('parentType', $.kladr.type.district);             city.kladr('parentId', obj.id);         } else {             ShowError(district, '\u041d\u0435\u0432\u0435\u0440\u043d\u043e \u0432\u0432\u0435\u0434\u0435\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0440\u0430\u0439\u043e\u043d\u0430');         }     } });  city.kladr({     verify: true,     check: function(obj) {         if(obj){             city.parent().find('label').text(obj.type);             street.kladr('parentType', $.kladr.type.city);             street.kladr('parentId', obj.id);             building.kladr('parentType', $.kladr.type.city);             building.kladr('parentId', obj.id);         } else {             ShowError(city, '\u041d\u0435\u0432\u0435\u0440\u043d\u043e \u0432\u0432\u0435\u0434\u0435\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0441\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430');         }     } });  street.kladr({     verify: true,     check: function(obj) {         if(obj){             street.parent().find('label').text(obj.type);             building.kladr('parentType', $.kladr.type.street);             building.kladr('parentId', obj.id);         } else {             ShowError(street, '\u041d\u0435\u0432\u0435\u0440\u043d\u043e \u0432\u0432\u0435\u0434\u0435\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0443\u043b\u0438\u0446\u044b');         }     } }); <\/code><\/pre>\n<p>  \u041d\u0443 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0448\u0442\u0440\u0438\u0445: \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0447\u0442\u043e\u0431\u044b \u043f\u0443\u043d\u043a\u0442\u044b \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0440\u0435\u0433\u0438\u043e\u043d\u043e\u0432 \u0438 \u0440\u0430\u0439\u043e\u043d\u043e\u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0432 \u0441\u0442\u0438\u043b\u0435 \u00ab\u041c\u043e\u0441\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u043e\u0431\u043b.\u00bb<\/p>\n<pre><code class=\"javascript\">var LabelFormat = function( obj, query ){     var label = '';      var name = obj.name.toLowerCase();     query = query.toLowerCase();      var start = name.indexOf(query);     start = start &gt; 0 ? start : 0;      if(query.length &lt; obj.name.length){         label += obj.name.substr(0, start);         label += '&lt;strong&gt;' + obj.name.substr(start, query.length) + '&lt;\/strong&gt;';         label += obj.name.substr(start+query.length, obj.name.length-query.length-start);     } else {         label += '&lt;strong&gt;' + obj.name + '&lt;\/strong&gt;';     }      if(obj.typeShort){         label += ' ' + obj.typeShort + '.';     }      return label; };  region.kladr({     labelFormat: LabelFormat, });  district.kladr({     labelFormat: LabelFormat, }); <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u0438 \u0432\u0441\u0451 =) <br \/>  \u0411\u0443\u0434\u0443 \u0440\u0430\u0434 \u0432\u0430\u0448\u0438\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c \u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0412\u0435\u0441\u044c JS \u043a\u043e\u0434<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">$(function() {     var token = '51dfe5d42fb2b43e3300006e';     var key   = '86a2c2a06f1b2451a87d05512cc2c3edfdf41969';      var region   = $('[name=&quot;region&quot;]');     var district = $('[name=&quot;district&quot;]');     var city     = $('[name=&quot;city&quot;]');     var street   = $('[name=&quot;street&quot;]');     var building = $('[name=&quot;building&quot;]');      var tooltip  = $('.tooltip');      var LabelFormat = function( obj, query ){         var label = '';          var name = obj.name.toLowerCase();         query = query.toLowerCase();          var start = name.indexOf(query);         start = start &gt; 0 ? start : 0;          if(query.length &lt; obj.name.length){             label += obj.name.substr(0, start);             label += '&lt;strong&gt;' + obj.name.substr(start, query.length) + '&lt;\/strong&gt;';             label += obj.name.substr(start+query.length, obj.name.length-query.length-start);         } else {             label += '&lt;strong&gt;' + obj.name + '&lt;\/strong&gt;';         }          if(obj.typeShort){             label += ' ' + obj.typeShort + '.';         }          return label;     };      var ShowError = function(input, message){         tooltip.find('span').text(message);          var inputOffset = input.offset();         var inputWidth  = input.outerWidth();         var inputHeight = input.outerHeight();          var tooltipHeight = tooltip.outerHeight();          tooltip.css({             left: (inputOffset.left + inputWidth + 10) + 'px',             top: (inputOffset.top + (inputHeight - tooltipHeight)\/2 - 1) + 'px'         });          tooltip.show();     };      region.kladr({         token: token,         key: key,         type: $.kladr.type.region,         labelFormat: LabelFormat,         verify: true,         select: function(obj) {             region.parent().find('label').text(obj.type);             district.kladr('parentType', $.kladr.type.region);             district.kladr('parentId', obj.id);             city.kladr('parentType', $.kladr.type.region);             city.kladr('parentId', obj.id);         },         check: function(obj) {             if(obj){                 region.parent().find('label').text(obj.type);                 district.kladr('parentType', $.kladr.type.region);                 district.kladr('parentId', obj.id);                 city.kladr('parentType', $.kladr.type.region);                 city.kladr('parentId', obj.id);             } else {                 ShowError(region, '\u041d\u0435\u0432\u0435\u0440\u043d\u043e \u0432\u0432\u0435\u0434\u0435\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0433\u0438\u043e\u043d\u0430');             }         }     });      district.kladr({         token: token,         key: key,         type: $.kladr.type.district,         labelFormat: LabelFormat,         verify: true,         select: function(obj) {             district.parent().find('label').text(obj.type);             city.kladr('parentType', $.kladr.type.district);             city.kladr('parentId', obj.id);         },         check: function(obj) {             if(obj){                 district.parent().find('label').text(obj.type);                 city.kladr('parentType', $.kladr.type.district);                 city.kladr('parentId', obj.id);             } else {                 ShowError(district, '\u041d\u0435\u0432\u0435\u0440\u043d\u043e \u0432\u0432\u0435\u0434\u0435\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0440\u0430\u0439\u043e\u043d\u0430');             }         }     });      city.kladr({         token: token,         key: key,         type: $.kladr.type.city,         verify: true,         select: function(obj) {             city.parent().find('label').text(obj.type);             street.kladr('parentType', $.kladr.type.city);             street.kladr('parentId', obj.id);             building.kladr('parentType', $.kladr.type.city);             building.kladr('parentId', obj.id);         },         check: function(obj) {             if(obj){                 city.parent().find('label').text(obj.type);                 street.kladr('parentType', $.kladr.type.city);                 street.kladr('parentId', obj.id);                 building.kladr('parentType', $.kladr.type.city);                 building.kladr('parentId', obj.id);             } else {                 ShowError(city, '\u041d\u0435\u0432\u0435\u0440\u043d\u043e \u0432\u0432\u0435\u0434\u0435\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0441\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430');             }         }     });      street.kladr({         token: token,         key: key,         type: $.kladr.type.street,         select: function(obj) {             street.parent().find('label').text(obj.type);             building.kladr('parentType', $.kladr.type.street);             building.kladr('parentId', obj.id);         },         check: function(obj) {             if(obj){                 street.parent().find('label').text(obj.type);                 building.kladr('parentType', $.kladr.type.street);                 building.kladr('parentId', obj.id);             } else {                 ShowError(street, '\u041d\u0435\u0432\u0435\u0440\u043d\u043e \u0432\u0432\u0435\u0434\u0435\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0443\u043b\u0438\u0446\u044b');             }         }     });      building.kladr({         token: token,         key: key,         type: $.kladr.type.building,         select: function(obj) {             building.parent().find('label').text(obj.type);         }     }); }); <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/f1f\/d8a\/8d5\/f1fd8a8d569f713bc01edd95cdf6361f.png\"\/>    \t<\/p>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/194018\/\"> http:\/\/habrahabr.ru\/post\/194018\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t\u0421\u0435\u0433\u043e\u0434\u043d\u044f, \u0432 \u0434\u0435\u043d\u044c \u0440\u0435\u043b\u0438\u0437\u0430 \u043d\u043e\u0432\u043e\u0433\u043e jQuery \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0438\u0441\u0430 <a href=\"http:\/\/kladr-api.ru\">\u041a\u041b\u0410\u0414\u0420 \u0432 \u043e\u0431\u043b\u0430\u043a\u0435<\/a>, \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0430\u0434\u0440\u0435\u0441\u0430 \u0441 \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0435\u0439.<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/c6e\/7ee\/4f3\/c6e7ee4f39834ef2cf69de8da3aea571.png\"\/>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-194018","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/194018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=194018"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/194018\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=194018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=194018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=194018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}