{"id":470607,"date":"2025-08-13T15:02:12","date_gmt":"2025-08-13T15:02:12","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=470607"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=470607","title":{"rendered":"<span>\u041f\u043e\u0438\u0441\u043a \u043d\u0430 RxJS \u0438 Taiga UI<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/693\/ca4\/1af\/693ca41afa4aa60359fd47b4cf960659.jpg\" width=\"780\" height=\"440\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/693\/ca4\/1af\/693ca41afa4aa60359fd47b4cf960659.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/693\/ca4\/1af\/693ca41afa4aa60359fd47b4cf960659.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u042f \u0410\u043d\u0442\u043e\u043d \u041c\u0430\u0440\u0447\u0435\u043d\u043a\u043e, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 \u0422-\u0411\u0430\u043d\u043a\u0435. \u041f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438 \u043d\u0430 RxJS, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043e\u0434\u043d\u0430\u0436\u0434\u044b \u0440\u0435\u0448\u0430\u043b\u0438. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 HR-\u043f\u043e\u0440\u0442\u0430\u043b \u0418\u0422-\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u043f\u043e\u0441\u0442\u0430\u043c \u0438 \u0441\u0442\u0430\u0442\u044c\u044f\u043c. \u041d\u0430\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u044f\u043b\u043e \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u043d\u0430 \u0441\u0430\u0439\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432: \u043f\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c, \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c. \u0410 \u0435\u0449\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u0437\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438, \u043d\u0435 \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u044e\u0441\u044c \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 Taiga UI \u2014 \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0438\u0441\u043a\u0430 <a href=\"https:\/\/taiga-ui.dev\/layout\/input-search\" rel=\"noopener noreferrer nofollow\">InputSearch.<\/a><\/p>\n<h2>\u0412\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 UI \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438<\/h2>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e\u0438\u0441\u043a\u0430 \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u0431\u0438\u0442\u044b \u043f\u043e \u0441\u0435\u043a\u0446\u0438\u044f\u043c:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b34\/269\/660\/b34269660fce036b7c184f2c6af90ecf.png\" alt=\"\u0421\u0435\u043a\u0446\u0438\u0438 Code \u0438 Links \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u044b\u0434\u0430\u0447\u0438 \u0432\u043d\u0443\u0442\u0440\u0438\" title=\"\u0421\u0435\u043a\u0446\u0438\u0438 Code \u0438 Links \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u044b\u0434\u0430\u0447\u0438 \u0432\u043d\u0443\u0442\u0440\u0438\" width=\"1025\" height=\"399\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/b34\/269\/660\/b34269660fce036b7c184f2c6af90ecf.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b34\/269\/660\/b34269660fce036b7c184f2c6af90ecf.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u0435\u043a\u0446\u0438\u0438 Code \u0438 Links \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u044b\u0434\u0430\u0447\u0438 \u0432\u043d\u0443\u0442\u0440\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0432\u044b\u0434\u0430\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0438\u0437 \u043d\u0430\u0431\u043e\u0440\u0430 <a href=\"https:\/\/lucide.dev\/icons\/\" rel=\"noopener noreferrer nofollow\">Lucide Icons.<\/a> \u0414\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438\u043a\u043e\u043d\u043e\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"https:\/\/taiga-ui.dev\/components\/avatar\" rel=\"noopener noreferrer nofollow\">Avatar<\/a> \u0438\u0437 Taiga UI.<\/p>\n<p>\u0421\u0435\u043a\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0442\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u043d\u0435\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2ea\/164\/f7b\/2ea164f7bbe76d013128acd9553d4901.png\" alt=\"\u0421\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u0432 \u0441\u0435\u043a\u0446\u0438\u044f\u0445 Posts \u0438 Articles\" title=\"\u0421\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u0432 \u0441\u0435\u043a\u0446\u0438\u044f\u0445 Posts \u0438 Articles\" width=\"959\" height=\"332\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/2ea\/164\/f7b\/2ea164f7bbe76d013128acd9553d4901.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2ea\/164\/f7b\/2ea164f7bbe76d013128acd9553d4901.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u0432 \u0441\u0435\u043a\u0446\u0438\u044f\u0445 Posts \u0438 Articles<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u043e\u0438\u0441\u043a\u0430, \u043a\u043e\u0433\u0434\u0430 \u0435\u0449\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u0432\u0435\u043b\u0438, \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u044b\u0434\u0430\u0447\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u044f\u0442\u0441\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u0430:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2c6\/f67\/83c\/2c6f6783ca03521adea0d71950e2bf7e.png\" alt=\"\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u0430\" title=\"\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u0430\" width=\"1600\" height=\"1007\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/2c6\/f67\/83c\/2c6f6783ca03521adea0d71950e2bf7e.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2c6\/f67\/83c\/2c6f6783ca03521adea0d71950e2bf7e.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u0432\u044b\u0434\u0430\u0447\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0440\u0430\u0437\u043d\u044b\u0435 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432 \u043f\u043e\u0438\u0441\u043a\u0435 \u0432\u0431\u0438\u0442\u044c \u043c\u0435\u043d\u0435\u0435 \u0442\u0440\u0435\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u0443\u0432\u0438\u0434\u0438\u043c \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4a3\/6e3\/205\/4a36e32054d1e369614e0dd3ecf7a548.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438\" width=\"1600\" height=\"199\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/4a3\/6e3\/205\/4a36e32054d1e369614e0dd3ecf7a548.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4a3\/6e3\/205\/4a36e32054d1e369614e0dd3ecf7a548.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<h2>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439: \u0443\u0441\u043f\u0435\u0445, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430, \u043e\u0448\u0438\u0431\u043a\u0430<\/h2>\n<p>\u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0432\u044b\u0434\u0430\u0447\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0441\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u0441\u0441\u044b\u043b\u043a\u0430. \u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u2014 \u043f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u0438\u043a\u043e\u043d\u043a\u0430. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">export interface SearchItemDto {  title: string;  subtitle?: string;  href: string;  icon?: string; }<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u043e \u0441\u0435\u043a\u0446\u0438\u044f\u043c. \u0412 \u043e\u0431\u0449\u0435\u043c \u0432\u0438\u0434\u0435 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u0432\u044b\u0434\u0430\u0447\u0430 \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043b\u044e\u0447\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u0438\u043c\u0435\u043d\u0430 \u0441\u0435\u043a\u0446\u0438\u0439. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"https:\/\/taiga-ui.dev\/layout\/input-search\" rel=\"noopener noreferrer nofollow\">tui-search-results<\/a> \u043d\u0430 \u0432\u0445\u043e\u0434 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"typescript\">\/\/ \u041c\u043e\u0434\u0435\u043b\u044c \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438 \/\/ string (\u043a\u043b\u044e\u0447) - \u0438\u043c\u044f \u0441\u0435\u043a\u0446\u0438\u0438 \/\/ T[] - \u043c\u0430\u0441\u0441\u0438\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u043a\u0446\u0438\u0438 \/\/ \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043d null - \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u044b\u0434\u0430\u0447\u0438 \u0432\u044b\u0432\u0435\u0434\u0435\u0442\u0441\u044f \u0431\u043b\u043e\u043a \u0441 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 Record&lt;string, readonly T[]&gt; | null<\/code><\/pre>\n<p>\u041f\u043e \u043a\u043b\u044e\u0447\u0443 (\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0441\u0435\u043a\u0446\u0438\u0438) \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u0430\u0441\u0441\u0438\u0432. \u0417\u043d\u0430\u044f \u044d\u0442\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0432 \u0441\u0435\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"typescript\">{   \/\/ \u0415\u0441\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0430: \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u0438 \u0441\u0435\u043a\u0446\u0438\u044f \u0441\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0438\u0437 \u0432\u044b\u0434\u0430\u0447\u0438  \"Links\": [],   \/\/ \u0415\u0441\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430: \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0444\u043b\u0430\u0433\u043e\u043c   \/\/ \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u043a\u0446\u0438\u0438 \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d  \"Users\": [{ \"loading\": true }] }<\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0435\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"typescript\">interface SearchItemResult&lt;T&gt; { \u00a0\u00a0\u00a0loading?: boolean; \u00a0\u00a0\u00a0data?: T; }<\/code><\/pre>\n<p>\u0412 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d \u043f\u043e \u0444\u043b\u0430\u0433\u0443 loading:<\/p>\n<pre><code class=\"typescript\">@if (item.loading) { \u00a0\u00a0&lt;!-- \u041e\u0442\u0440\u0438\u0441\u0443\u0435\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d --&gt; } @else { \u00a0\u00a0&lt;!-- \u041e\u0442\u0440\u0438\u0441\u0443\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438 --&gt; }<\/code><\/pre>\n<h2>\u041a\u043e\u043d\u0446\u0435\u043f\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0434\u0432\u0438\u0436\u043a\u043e\u0432<\/h2>\n<p>\u0423 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0438\u0441\u043a \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0439. \u0414\u043b\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u0441 \u0444\u0440\u043e\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441:<\/p>\n<pre><code class=\"typescript\">\"GET \/api\/main-search?q=ant\"<\/code><\/pre>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0438\u0441\u043a \u0438\u0449\u0435\u0442 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e \u0434\u0432\u0443\u043c \u0441\u0435\u043a\u0446\u0438\u044f\u043c, \u043f\u043e \u043f\u043e\u0441\u0442\u0430\u043c \u0438 \u0441\u0442\u0430\u0442\u044c\u044f\u043c:<\/p>\n<pre><code class=\"typescript\">\/\/ GET \/api\/main-search?q=\u0441\u0442\u0430\u0442\u044c\u044f  \/\/ Response: { \u00a0\"Posts\": [...], \u00a0\"Articles\": [...] }<\/code><\/pre>\n<p>\u0412\u043d\u0435\u0448\u043d\u0438\u0439 \u043f\u043e\u0438\u0441\u043a \u2014 \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432\u0438\u0434\u0430:<\/p>\n<pre><code class=\"typescript\">\"GET \/api\/extra-search\/links?q=ivan\" \"GET \/api\/extra-search\/users?q=ivan\"<\/code><\/pre>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043f\u043e\u0438\u0441\u043a \u0445\u043e\u0434\u0438\u0442 \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u0435\u043a\u0446\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c:<\/p>\n<pre><code class=\"typescript\">\/\/ GET \/api\/extra-search\/users?q=ivan  \/\/ Response: [ \u00a0\u00a0{ \u00a0\u00a0\u00a0\u00a0\u00a0\"title\": \"Ivan Ivanov\", \u00a0\u00a0\u00a0\u00a0\u00a0\"href\": \"https:\/\/my.example.com\/user\/1\",   } ]<\/code><\/pre>\n<p>\u0421\u0435\u043a\u0446\u0438\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 (Posts, Articles) \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u0432\u0435\u0440\u0445\u0443 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u043a\u0446\u0438\u0438 (Links, Users, Code \u0438 \u0434\u0440\u0443\u0433\u0438\u0435) \u2014 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u0438, \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u0433\u043e \u043f\u043e\u0434 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0443.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b38\/be7\/790\/b38be77909b0c92bd935907b9d15a996.png\" alt=\"\u0421\u0435\u043a\u0446\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u0430\" title=\"\u0421\u0435\u043a\u0446\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u0430\" width=\"1600\" height=\"922\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/b38\/be7\/790\/b38be77909b0c92bd935907b9d15a996.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b38\/be7\/790\/b38be77909b0c92bd935907b9d15a996.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u0435\u043a\u0446\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u043c. \u0415\u0441\u043b\u0438 \u043e\u043d \u0443\u043f\u0430\u043b, \u043c\u044b \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u0438 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443 \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/878\/584\/87c\/87858487ca7ab1944936a60ff5fd8a0b.png\" alt=\"\u0417\u0430\u0433\u043b\u0443\u0448\u043a\u0430 \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435\" title=\"\u0417\u0430\u0433\u043b\u0443\u0448\u043a\u0430 \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435\" width=\"1600\" height=\"220\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/878\/584\/87c\/87858487ca7ab1944936a60ff5fd8a0b.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/878\/584\/87c\/87858487ca7ab1944936a60ff5fd8a0b.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0417\u0430\u0433\u043b\u0443\u0448\u043a\u0430 \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u0438 \u2014 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u043f\u043e\u0438\u0441\u043a\u0443. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0435\u0441\u043b\u0438 \u043f\u0440\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043a \u043e\u0434\u043d\u043e\u043c\u0443 \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 \u0438\u043b\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0448\u043b\u043e\u0441\u044c, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0441\u0435\u043a\u0446\u0438\u044e \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0432 \u0432\u044b\u0434\u0430\u0447\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0438\u0441\u043a.<\/p>\n<p>\u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438, \u043d\u0435 \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u043d\u0430 \u0431\u044d\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432. \u041f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0445\u043e\u0434\u0438\u043c \u0432 \u044d\u0442\u043e\u0442 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u0438 \u0432\u044b\u0442\u044f\u043d\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432:<\/p>\n<pre><code class=\"typescript\">\/\/ GET \/api\/extra-search-resources  \/\/ Response: [ \u00a0{ \u00a0\u00a0\u00a0\"sourceId\": \"users\", \u00a0\u00a0\u00a0\"name\": \"Users\", \u00a0\u00a0\u00a0\"priority\": 2 \u00a0},  { \u00a0\u00a0\u00a0\"sourceId\": \"code\", \u00a0\u00a0\u00a0\"name\": \"Code\", \u00a0\u00a0\u00a0\"priority\": 1 \u00a0}, \u00a0{ \u00a0\u00a0\u00a0\"sourceId\": \"links\", \u00a0\u00a0\u00a0\"name\": \"Links\", \u00a0\u00a0\u00a0\"priority\": 1 \u00a0} ]<\/code><\/pre>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433 \u0441\u043a\u0430\u0436\u0435\u0442 \u043d\u0430\u043c, \u0432 \u043a\u0430\u043a\u0438\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u0438 \u0431\u0443\u0434\u0435\u043c \u0445\u043e\u0434\u0438\u0442\u044c \u0438 \u0432 \u043a\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u0435\u043a\u0446\u0438\u0438 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 \u0432\u044b\u0434\u0430\u0447\u0438. \u041c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0447\u0430\u0441\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430, \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0434\u043e\u043b\u0433\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0438\u043b\u0438 \u0432\u043e\u0432\u0441\u0435 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u043c\u044b \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 (\u043f\u043e\u043b\u0435 priority). \u0421\u0430\u043c\u044b\u0435 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0435 \u0438 \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u0430\u043c\u044b\u0439 \u043d\u0438\u0437\u043a\u0438\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432\u043d\u0438\u0437\u0443 \u0432\u044b\u0434\u0430\u0447\u0438.<\/p>\n<p>\u041f\u043e\u043b\u0435 name \u2014 \u0438\u043c\u044f \u0441\u0435\u043a\u0446\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438 \u0432 UI. \u041f\u043e\u043b\u0435 sourceId \u2014 ID \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u0430. \u041f\u043e \u043d\u0435\u043c\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f sourceId:users \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441:<\/p>\n<pre><code class=\"typescript\">\"\/api\/extra-search\/users?q=ivan\"<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0441 \u0444\u0440\u043e\u043d\u0442\u0430 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a06\/cea\/ca1\/a06ceaca1852864d8c2d41e64ab0397b.png\" alt=\"\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u0430\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432\" title=\"\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u0430\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432\" width=\"1782\" height=\"674\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a06\/cea\/ca1\/a06ceaca1852864d8c2d41e64ab0397b.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a06\/cea\/ca1\/a06ceaca1852864d8c2d41e64ab0397b.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u0430\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 BFF, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442 \u0432\u0441\u0435 \u044d\u0442\u0438 \u0440\u0443\u0447\u043a\u0438 \u0432\u043c\u0435\u0441\u0442\u0435, \u0434\u043e\u0436\u0434\u0435\u0442\u0441\u044f \u0438\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0442\u0434\u0430\u0441\u0442 \u0435\u0434\u0438\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442? \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u044d\u043a \u043e\u0442\u0434\u0430\u0441\u0442 \u043e\u0442\u0432\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0434\u0443\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u0445 \u0440\u0443\u0447\u0435\u043a, \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432\u044b\u0434\u0430\u0441\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.<\/p>\n<p>\u041c\u044b \u0436\u0435 \u0445\u043e\u0442\u0438\u043c \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u043d\u044c\u0448\u0435, \u043f\u043e \u043c\u0435\u0440\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. \u041f\u043e\u043a\u0430 \u0441\u0430\u043c\u044b\u0435 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 \u0432\u044b\u0434\u0430\u0447\u0438 \u0442\u043e, \u0447\u0442\u043e \u0438\u0441\u043a\u0430\u043b. \u0418 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443, \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c, \u043f\u043e\u043a\u0430 \u0432\u0435\u0441\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u0440\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f.<\/p>\n<p>\u041f\u043e\u043a\u0430 \u0436\u0434\u0435\u043c \u043e\u0442\u0432\u0435\u0442\u044b \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0440\u0438\u0441\u0443\u0435\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ef6\/9aa\/514\/ef69aa51463b0f7f50ab372cf80f3017.png\" alt=\"\u0418\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435: \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0435\u043a\u0446\u0438\u0439\" title=\"\u0418\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435: \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0435\u043a\u0446\u0438\u0439\" width=\"1750\" height=\"1126\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/ef6\/9aa\/514\/ef69aa51463b0f7f50ab372cf80f3017.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ef6\/9aa\/514\/ef69aa51463b0f7f50ab372cf80f3017.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0418\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435: \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0435\u043a\u0446\u0438\u0439<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u043a\u0430\u043a\u043e\u043c\u0443-\u043b\u0438\u0431\u043e \u0438\u0437 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u043f\u0440\u0438\u0448\u043b\u0438, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0438\u0445 \u0432 \u0432\u044b\u0434\u0430\u0447\u0435, \u0430 \u043f\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u043c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0438\u0441\u043a. \u041e\u043d \u0442\u0443\u0442 \u0436\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0441\u044f \u0432 \u0432\u044b\u0434\u0430\u0447\u0435, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u0436\u0434\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u043f\u043e\u0434 \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u0430\u043c\u0438.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/77c\/8d3\/892\/77c8d389286e6bd3edab7fac1c22574c.png\" alt=\"\u0421\u043c\u0435\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0435\u043a\u0446\u0438\u0439, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0438\u0448\u0435\u043b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\" title=\"\u0421\u043c\u0435\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0435\u043a\u0446\u0438\u0439, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0438\u0448\u0435\u043b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\" width=\"1784\" height=\"1142\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/77c\/8d3\/892\/77c8d389286e6bd3edab7fac1c22574c.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/77c\/8d3\/892\/77c8d389286e6bd3edab7fac1c22574c.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043c\u0435\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0435\u043a\u0446\u0438\u0439, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0438\u0448\u0435\u043b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0438\u0437 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u043e\u0442\u0432\u0430\u043b\u0438\u043b\u0441\u044f, \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e, \u0431\u0443\u0434\u0442\u043e \u0431\u044b \u0435\u0433\u043e \u0438 \u043d\u0435 \u0431\u044b\u043b\u043e \u0432 \u0432\u044b\u0434\u0430\u0447\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 (\u0441\u0435\u043a\u0446\u0438\u044f Users) \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438\u0441\u044c \u0438 \u0432\u044b\u0432\u0435\u043b\u0438\u0441\u044c \u0432 \u0432\u044b\u0434\u0430\u0447\u0443, \u0430 \u0432\u043e\u0442 \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u043e\u0442\u0432\u0430\u043b\u0438\u043b\u0441\u044f \u0438\u0437-\u0437\u0430 \u043e\u0448\u0438\u0431\u043a\u0438. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0435\u043a\u0446\u0438\u044f \u0441\u0441\u044b\u043b\u043e\u043a (Links) \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u0440\u043e\u043f\u0430\u0434\u0435\u0442 \u0438\u0437 \u0432\u044b\u0434\u0430\u0447\u0438.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/67f\/b37\/5a0\/67fb375a06a4cc5b9a7d1baf920b7829.png\" alt=\"\u0421\u043c\u0435\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0441\u0435\u043a\u0446\u0438\u0438, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0438\u0441\u043a \u043e\u0442\u0432\u0430\u043b\u0438\u043b\u0441\u044f \u0438\u0437-\u0437\u0430 \u043e\u0448\u0438\u0431\u043a\u0438\" title=\"\u0421\u043c\u0435\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0441\u0435\u043a\u0446\u0438\u0438, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0438\u0441\u043a \u043e\u0442\u0432\u0430\u043b\u0438\u043b\u0441\u044f \u0438\u0437-\u0437\u0430 \u043e\u0448\u0438\u0431\u043a\u0438\" width=\"1812\" height=\"1070\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/67f\/b37\/5a0\/67fb375a06a4cc5b9a7d1baf920b7829.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/67f\/b37\/5a0\/67fb375a06a4cc5b9a7d1baf920b7829.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043c\u0435\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0441\u0435\u043a\u0446\u0438\u0438, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0438\u0441\u043a \u043e\u0442\u0432\u0430\u043b\u0438\u043b\u0441\u044f \u0438\u0437-\u0437\u0430 \u043e\u0448\u0438\u0431\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<h2>\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/h2>\n<p>\u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043e\u0442 \u0432\u0432\u043e\u0434\u0430 \u0434\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044d\u0442\u0430\u043f\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u0432\u0432\u043e\u0434 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0431\u044d\u043a;<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0442\u043e\u043a\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0435\u0434\u0438\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0432\u044b\u0434\u0430\u0447\u0438 \u0432 UI.<\/p>\n<\/li>\n<\/ul>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u044d\u0442\u0430\u043f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438. \u0428\u0430\u0431\u043b\u043e\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u044b\u0434\u0430\u0447\u0438 \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u042d\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438 \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u043c\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438 \u0438\u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438.<\/p>\n<pre><code class=\"typescript\">@if (status === 'tooShortQuery') { \u00a0\u00a0&lt;!-- 1) \u041f\u0440\u043e\u0441\u044c\u0431\u0430 \u0432\u0432\u0435\u0441\u0442\u0438 \u0431\u043e\u043b\u0435\u0435 3-\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 --&gt; } @else if (status === 'error') { \u00a0\u00a0&lt;!-- 2) \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 --&gt; } @else if (status === 'pendingTyping') { \u00a0\u00a0&lt;!-- 3) \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0438 \u0432\u0432\u043e\u0434\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 --&gt; } @else { \u00a0\u00a0&lt;!-- 4) \u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438 --&gt; \u00a0\u00a0&lt;!-- 5) \u0418\u043b\u0438 \u0431\u043b\u043e\u043a\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u0430--&gt; }<\/code><\/pre>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p><em>pendingTyping: <\/em>\u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0435 \u0432\u0432\u043e\u0434\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p><em>tooShortQuery<\/em>: \u043f\u0440\u043e\u0441\u044c\u0431\u0430 \u0432\u0432\u0435\u0441\u0442\u0438 \u0431\u043e\u043b\u0435\u0435 3 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><em>historyAndPopular<\/em>: \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0431\u043b\u043e\u043a\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u044d\u0442\u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">const resultState$: Observable&lt;SearchResultState&gt; = \u00a0\u00a0\u00a0\u00a0this.control.valueChanges.pipe( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0startWith(''), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0switchMap(query =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const state = { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0pendingTyping: { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0status: 'pendingTyping', \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0422\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 tui-search-results. \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u043f\u0443\u0441\u0442\u043e\u0435, \u0430 \u0432 results \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c data: null \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u0431\u043b\u043e\u043a \u0441 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c\u0438 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439. \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0historyAndPopular: { status: 'ready', data: null }, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0tooShortQuery: { status: 'tooShortQuery' }, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} as const;  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!query &amp;&amp; this.control.value) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return of(state.pendingTyping); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!query) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0431\u043b\u043e\u043a\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return of(state.historyAndPopular); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (query.length &lt; 3) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return of(state.tooShortQuery); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043f\u043e\u0438\u0441\u043a \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return this.searchService.makeSearch$(query); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}) \u00a0\u00a0\u00a0\u00a0);<\/code><\/pre>\n<h2>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043f\u0440\u043e\u0448\u043b\u0438 \u0432\u0441\u0435 \u044d\u0442\u0430\u043f\u044b \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438, \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043f\u043e\u0438\u0441\u043a. \u041e\u043d \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0439:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d1a\/9c7\/65a\/d1a9c765a0f5b9e1b3b416d411520a08.png\" alt=\"\u0421\u0445\u0435\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u0445\" title=\"\u0421\u0445\u0435\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u0445\" width=\"2210\" height=\"920\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/d1a\/9c7\/65a\/d1a9c765a0f5b9e1b3b416d411520a08.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d1a\/9c7\/65a\/d1a9c765a0f5b9e1b3b416d411520a08.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u0445\u0435\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u0445<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0431\u044d\u043a:<\/p>\n<pre><code class=\"typescript\">\u00a0function makeMainSearch$(query: string) { \u00a0\u00a0\u00a0\u00a0return this.http \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.get(`${this.baseUrl}\/main-search?q=${query}`) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.pipe( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0map(result =&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Object.entries(result).reduce( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0(acc, [key, data]) =&gt; ({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...acc, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[key]: data.map(item =&gt; ({ data: item })), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{} as SearchResult \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u041f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0438\u0441\u0443\u0435\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0434\u043b\u044f \u0441\u0435\u043a\u0446\u0438\u0439 \u043f\u043e\u0441\u0442\u043e\u0432 \u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0startWith&lt;SearchResult&gt;({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Posts: [{ loading: true }], \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Articles: [{ loading: true }], \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0); \u00a0\u00a0}<\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433 \u0434\u043b\u044f \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432:<\/p>\n<pre><code class=\"typescript\">const extraSearchSources$ = this.http \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.get(`${this.baseUrl}\/extra-search-sources`) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.pipe( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u0435\u043a\u0446\u0438\u0439 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0map(items =&gt; items.sort((a, b) =&gt; a.priority - b.priority)), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0448\u0438\u0431\u043a\u0438\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0catchError(() =&gt; of([])), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0437\u0430\u043a\u044d\u0448\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0shareReplay(1) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);<\/code><\/pre>\n<p>\u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443 \u0434\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043c \u043f\u0430\u0447\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0431\u044d\u043a:<\/p>\n<pre><code class=\"typescript\">\u00a0function makeExtraSearch$(query: string) { \u00a0\u00a0\u00a0\u00a0const initialValue: SearchResult = {};  \u00a0\u00a0\u00a0\u00a0\/\/ \u0431\u0435\u0440\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u00a0\u00a0\u00a0\u00a0return this.extraSearchSources$ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.pipe( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043f\u0430\u0447\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0431\u044d\u043a \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0switchMap(sources =&gt; from(sources)),  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043c \u043f\u0430\u0447\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mergeMap(source =&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.makeSearchFromExtraSource$(query, source) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.pipe( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u043e\u0442\u043e\u043a\u043e\u0432 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0441\u043e\u0431\u0435\u0440\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432 \u0435\u0434\u0438\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0scan( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0(acc, curr) =&gt; ({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...acc, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...curr, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0initialValue \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0); \u00a0}<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0431\u044d\u043a \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">function makeSearchFromExtraSource$( \u00a0\u00a0\u00a0\u00a0query: string, \u00a0\u00a0\u00a0\u00a0source: ExtraSearchSourceDto \u00a0\u00a0) { \u00a0\u00a0\u00a0\u00a0return this.http \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.get&lt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0SearchItemDto[] \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt;(`${this.baseUrl}\/extra-search\/${source.sourceId}?q=${query}`) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.pipe( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0map(value =&gt; ({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0441\u0435\u043a\u0446\u0438\u044e \u043f\u043e \u0435\u0435 \u0438\u043c\u0435\u043d\u0438 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[source.sectionName]: value.map(data =&gt; ({ data })), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})),  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0startWith&lt;SearchResult&gt;({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[source.sectionName]: [{ loading: true }], \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}),  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0catchError(() =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return of&lt;SearchResult&gt;({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[source.sectionName]: [], \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0); \u00a0\u00a0}<\/code><\/pre>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0438 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u0441\u043e\u0431\u0435\u0440\u0435\u043c \u0432 \u0435\u0434\u0438\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u2014 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438:<\/p>\n<pre><code class=\"typescript\">\u00a0function makeSearch$(query: string): Observable&lt;SearchResultState&gt; { \u00a0\u00a0\u00a0\u00a0const mainSearch$ = this.makeMainSearch$(query); \/\/ \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0438\u0441\u043a \u00a0\u00a0\u00a0\u00a0const extraSearch$ = this.makeExtraSearch$(query); \/\/ \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u00a0\u00a0\u00a0\u00a0const initialValue: SearchResult = {};  \u00a0\u00a0\u00a0\u00a0\/\/ \u0441\u043c\u0435\u0440\u0436\u0438\u043c \u043f\u043e\u0442\u043e\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u00a0\u00a0\u00a0\u00a0return merge(mainSearch$, extraSearch$).pipe( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0441\u043e\u0431\u0435\u0440\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0435\u0434\u0438\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u2014 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0scan( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0(acc, curr) =&gt; ({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...acc, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...acc.data, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...curr, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0status: 'ready', \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: initialValue, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} as const \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u043e\u0448\u0438\u0431\u043a\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0catchError(() =&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0of({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0status: 'error', \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} as const) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0); \u00a0\u00a0}<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u043c\u0435\u043d\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u044b\u0434\u0430\u0447\u0438 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d8f\/61e\/33f\/d8f61e33f5002c34484b2cc9f02fe87a.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043c\u0435\u043d\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 \u00ab\u0432\u0441\u0435 \u0432 \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u0430\u0445\u00bb \u0434\u043e \u00ab\u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438\u0441\u044c\u00bb\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043c\u0435\u043d\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 \u00ab\u0432\u0441\u0435 \u0432 \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u0430\u0445\u00bb \u0434\u043e \u00ab\u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438\u0441\u044c\u00bb\" width=\"2284\" height=\"662\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/d8f\/61e\/33f\/d8f61e33f5002c34484b2cc9f02fe87a.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d8f\/61e\/33f\/d8f61e33f5002c34484b2cc9f02fe87a.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043c\u0435\u043d\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 \u00ab\u0432\u0441\u0435 \u0432 \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u0430\u0445\u00bb \u0434\u043e \u00ab\u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438\u0441\u044c\u00bb<\/figcaption><\/div>\n<\/figure>\n<h2>\u0420\u0430\u043d\u0436\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0435\u043a\u0446\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432<\/h2>\n<p>\u041a\u0430\u043a \u0436\u0435 \u0432\u044b\u0445\u043e\u0434\u0438\u0442, \u0447\u0442\u043e \u0441\u0435\u043a\u0446\u0438\u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u0432\u044b\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435? \u041c\u044b \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0431\u044d\u043a \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0440\u0430\u043d\u0436\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0412 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0440\u0430\u043d\u0436\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u043a\u0446\u0438\u0438 \u043f\u043e\u043f\u0430\u043b\u0438 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u044b\u0434\u0430\u0447\u0438, \u0432\u0435\u0434\u044c \u043c\u044b \u0438\u0445 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u044d\u043c\u0438\u0442\u0438\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>startWith<\/code>:<\/p>\n<pre><code class=\"typescript\">startWith({ [source.sectionName]: [{ loading: true }] })<\/code><\/pre>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/022\/012\/baa\/022012baa1c945a675235b98d1074ceb.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043c\u0435\u043d\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043c\u0435\u043d\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\" width=\"2050\" height=\"562\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/022\/012\/baa\/022012baa1c945a675235b98d1074ceb.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/022\/012\/baa\/022012baa1c945a675235b98d1074ceb.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043c\u0435\u043d\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442 \u043f\u0435\u0440\u0432\u044b\u0435 \u044d\u043c\u0438\u0442\u044b \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0443\u0442 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e. \u0410 \u043f\u043e\u0442\u043e\u043c, \u043a\u043e\u0433\u0434\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u044d\u0442\u043e \u0443\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0430 \u043f\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043a\u043b\u044e\u0447\u0430\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u0435\u043a\u0446\u0438\u0438 \u0441 \u043f\u0435\u0440\u0432\u044b\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c \u043f\u0440\u0438\u0434\u0443\u0442 \u0441\u0430\u043c\u044b\u043c\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c\u0438. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0441\u0435\u043a\u0446\u0438\u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435.<\/p>\n<h2>\u0418\u0442\u043e\u0433\u0438<\/h2>\n<p>\u0421\u043e\u0431\u0435\u0440\u0435\u043c \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 <a href=\"https:\/\/stackblitz.com\/~\/github.com\/anton-marchenko\/tui-search-habr\" rel=\"noopener noreferrer nofollow\">Stackblitz.<\/a> \u0414\u043b\u044f \u043c\u043e\u043a\u043e\u0432\u043e\u0433\u043e \u0431\u044d\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <abbr class=\"habraabbr\" title=\"\u0435\u0441\u043b\u0438 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0434\u0435\u043c\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 VPN\" data-title=\"&lt;p&gt;\u0435\u0441\u043b\u0438 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0434\u0435\u043c\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 VPN&lt;\/p&gt;\" data-abbr=\"\u0441\u0435\u0440\u0432\u0438\u0441 My JSON Server.\">\u0441\u0435\u0440\u0432\u0438\u0441 My JSON Server.<\/abbr><\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u043c\u0438 \u043f\u043e\u0438\u0441\u043a\u0430\u043c\u0438, \u043d\u0435 \u0432\u043d\u043e\u0441\u044f \u043f\u0440\u0430\u0432\u043a\u0438 \u0432 \u043a\u043e\u0434. \u041d\u043e\u0432\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 \u0438 \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0433\u043e \u0441\u043c\u043e\u0436\u0435\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0441\u0435\u043a\u0446\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u0432 \u0432\u044b\u0434\u0430\u0447\u0435.<\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e RxJS-\u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0441\u043c\u0435\u043d\u043e\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Taiga UI \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u0430.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0438\u043b\u0438 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0438\u0434\u0435\u0438 \u2014 \u0434\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438!<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/936794\/\"> https:\/\/habr.com\/ru\/articles\/936794\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u042f \u0410\u043d\u0442\u043e\u043d \u041c\u0430\u0440\u0447\u0435\u043d\u043a\u043e, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 \u0422-\u0411\u0430\u043d\u043a\u0435. \u041f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438 \u043d\u0430 RxJS, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043e\u0434\u043d\u0430\u0436\u0434\u044b \u0440\u0435\u0448\u0430\u043b\u0438. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 HR-\u043f\u043e\u0440\u0442\u0430\u043b \u0418\u0422-\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u043f\u043e\u0441\u0442\u0430\u043c \u0438 \u0441\u0442\u0430\u0442\u044c\u044f\u043c. \u041d\u0430\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u044f\u043b\u043e \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u043d\u0430 \u0441\u0430\u0439\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432: \u043f\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c, \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c. \u0410 \u0435\u0449\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u0437\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438, \u043d\u0435 \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u044e\u0441\u044c \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 Taiga UI \u2014 \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0438\u0441\u043a\u0430 <a href=\"https:\/\/taiga-ui.dev\/layout\/input-search\" rel=\"noopener noreferrer nofollow\">InputSearch.<\/a><\/p>\n<h2>\u0412\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 UI \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438<\/h2>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e\u0438\u0441\u043a\u0430 \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u0431\u0438\u0442\u044b \u043f\u043e \u0441\u0435\u043a\u0446\u0438\u044f\u043c:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u0435\u043a\u0446\u0438\u0438 Code \u0438 Links \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u044b\u0434\u0430\u0447\u0438 \u0432\u043d\u0443\u0442\u0440\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0432\u044b\u0434\u0430\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0438\u0437 \u043d\u0430\u0431\u043e\u0440\u0430 <a href=\"https:\/\/lucide.dev\/icons\/\" rel=\"noopener noreferrer nofollow\">Lucide Icons.<\/a> \u0414\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438\u043a\u043e\u043d\u043e\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"https:\/\/taiga-ui.dev\/components\/avatar\" rel=\"noopener noreferrer nofollow\">Avatar<\/a> \u0438\u0437 Taiga UI.<\/p>\n<p>\u0421\u0435\u043a\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0442\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u043d\u0435\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u0432 \u0441\u0435\u043a\u0446\u0438\u044f\u0445 Posts \u0438 Articles<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u043e\u0438\u0441\u043a\u0430, \u043a\u043e\u0433\u0434\u0430 \u0435\u0449\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u0432\u0435\u043b\u0438, \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u044b\u0434\u0430\u0447\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u044f\u0442\u0441\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u0430:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u0432\u044b\u0434\u0430\u0447\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0440\u0430\u0437\u043d\u044b\u0435 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432 \u043f\u043e\u0438\u0441\u043a\u0435 \u0432\u0431\u0438\u0442\u044c \u043c\u0435\u043d\u0435\u0435 \u0442\u0440\u0435\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u0443\u0432\u0438\u0434\u0438\u043c \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<h2>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439: \u0443\u0441\u043f\u0435\u0445, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430, \u043e\u0448\u0438\u0431\u043a\u0430<\/h2>\n<p>\u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0432\u044b\u0434\u0430\u0447\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0441\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u0441\u0441\u044b\u043b\u043a\u0430. \u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u2014 \u043f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u0438\u043a\u043e\u043d\u043a\u0430. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">export interface SearchItemDto {  title: string;  subtitle?: string;  href: string;  icon?: string; }<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u043e \u0441\u0435\u043a\u0446\u0438\u044f\u043c. \u0412 \u043e\u0431\u0449\u0435\u043c \u0432\u0438\u0434\u0435 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u0432\u044b\u0434\u0430\u0447\u0430 \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043b\u044e\u0447\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u0438\u043c\u0435\u043d\u0430 \u0441\u0435\u043a\u0446\u0438\u0439. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"https:\/\/taiga-ui.dev\/layout\/input-search\" rel=\"noopener noreferrer nofollow\">tui-search-results<\/a> \u043d\u0430 \u0432\u0445\u043e\u0434 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"typescript\">\/\/ \u041c\u043e\u0434\u0435\u043b\u044c \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438 \/\/ string (\u043a\u043b\u044e\u0447) - \u0438\u043c\u044f \u0441\u0435\u043a\u0446\u0438\u0438 \/\/ T[] - \u043c\u0430\u0441\u0441\u0438\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u043a\u0446\u0438\u0438 \/\/ \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043d null - \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u044b\u0434\u0430\u0447\u0438 \u0432\u044b\u0432\u0435\u0434\u0435\u0442\u0441\u044f \u0431\u043b\u043e\u043a \u0441 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 Record&lt;string, readonly T[]&gt; | null<\/code><\/pre>\n<p>\u041f\u043e \u043a\u043b\u044e\u0447\u0443 (\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0441\u0435\u043a\u0446\u0438\u0438) \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u0430\u0441\u0441\u0438\u0432. \u0417\u043d\u0430\u044f \u044d\u0442\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0432 \u0441\u0435\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"typescript\">{   \/\/ \u0415\u0441\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0430: \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u0438 \u0441\u0435\u043a\u0446\u0438\u044f \u0441\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0438\u0437 \u0432\u044b\u0434\u0430\u0447\u0438  \"Links\": [],   \/\/ \u0415\u0441\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430: \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0444\u043b\u0430\u0433\u043e\u043c   \/\/ \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u043a\u0446\u0438\u0438 \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d  \"Users\": [{ \"loading\": true }] }<\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0435\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"typescript\">interface SearchItemResult&lt;T&gt; { \u00a0\u00a0\u00a0loading?: boolean; \u00a0\u00a0\u00a0data?: T; }<\/code><\/pre>\n<p>\u0412 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d \u043f\u043e \u0444\u043b\u0430\u0433\u0443 loading:<\/p>\n<pre><code class=\"typescript\">@if (item.loading) { \u00a0\u00a0&lt;!-- \u041e\u0442\u0440\u0438\u0441\u0443\u0435\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d --&gt; } @else { \u00a0\u00a0&lt;!-- \u041e\u0442\u0440\u0438\u0441\u0443\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438 --&gt; }<\/code><\/pre>\n<h2>\u041a\u043e\u043d\u0446\u0435\u043f\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0434\u0432\u0438\u0436\u043a\u043e\u0432<\/h2>\n<p>\u0423 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0438\u0441\u043a \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0439. \u0414\u043b\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u0441 \u0444\u0440\u043e\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441:<\/p>\n<pre><code class=\"typescript\">\"GET \/api\/main-search?q=ant\"<\/code><\/pre>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0438\u0441\u043a \u0438\u0449\u0435\u0442 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e \u0434\u0432\u0443\u043c \u0441\u0435\u043a\u0446\u0438\u044f\u043c, \u043f\u043e \u043f\u043e\u0441\u0442\u0430\u043c \u0438 \u0441\u0442\u0430\u0442\u044c\u044f\u043c:<\/p>\n<pre><code class=\"typescript\">\/\/ GET \/api\/main-search?q=\u0441\u0442\u0430\u0442\u044c\u044f  \/\/ Response: { \u00a0\"Posts\": [...], \u00a0\"Articles\": [...] }<\/code><\/pre>\n<p>\u0412\u043d\u0435\u0448\u043d\u0438\u0439 \u043f\u043e\u0438\u0441\u043a \u2014 \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432\u0438\u0434\u0430:<\/p>\n<pre><code class=\"typescript\">\"GET \/api\/extra-search\/links?q=ivan\" \"GET \/api\/extra-search\/users?q=ivan\"<\/code><\/pre>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043f\u043e\u0438\u0441\u043a \u0445\u043e\u0434\u0438\u0442 \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u0435\u043a\u0446\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c:<\/p>\n<pre><code class=\"typescript\">\/\/ GET \/api\/extra-search\/users?q=ivan  \/\/ Response: [ \u00a0\u00a0{ \u00a0\u00a0\u00a0\u00a0\u00a0\"title\": \"Ivan Ivanov\", \u00a0\u00a0\u00a0\u00a0\u00a0\"href\": \"https:\/\/my.example.com\/user\/1\",   } ]<\/code><\/pre>\n<p>\u0421\u0435\u043a\u0446\u0438\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 (Posts, Articles) \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u0432\u0435\u0440\u0445\u0443 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u043a\u0446\u0438\u0438 (Links, Users, Code \u0438 \u0434\u0440\u0443\u0433\u0438\u0435) \u2014 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u0438, \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u0433\u043e \u043f\u043e\u0434 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0443.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u0435\u043a\u0446\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u043c. \u0415\u0441\u043b\u0438 \u043e\u043d \u0443\u043f\u0430\u043b, \u043c\u044b \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u0438 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443 \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0417\u0430\u0433\u043b\u0443\u0448\u043a\u0430 \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u0438 \u2014 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u043f\u043e\u0438\u0441\u043a\u0443. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0435\u0441\u043b\u0438 \u043f\u0440\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043a \u043e\u0434\u043d\u043e\u043c\u0443 \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 \u0438\u043b\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0448\u043b\u043e\u0441\u044c, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0441\u0435\u043a\u0446\u0438\u044e \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0432 \u0432\u044b\u0434\u0430\u0447\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0438\u0441\u043a.<\/p>\n<p>\u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438, \u043d\u0435 \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u043d\u0430 \u0431\u044d\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432. \u041f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0445\u043e\u0434\u0438\u043c \u0432 \u044d\u0442\u043e\u0442 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u0438 \u0432\u044b\u0442\u044f\u043d\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432:<\/p>\n<pre><code class=\"typescript\">\/\/ GET \/api\/extra-search-resources  \/\/ Response: [ \u00a0{ \u00a0\u00a0\u00a0\"sourceId\": \"users\", \u00a0\u00a0\u00a0\"name\": \"Users\", \u00a0\u00a0\u00a0\"priority\": 2 \u00a0},  { \u00a0\u00a0\u00a0\"sourceId\": \"code\", \u00a0\u00a0\u00a0\"name\": \"Code\", \u00a0\u00a0\u00a0\"priority\": 1 \u00a0}, \u00a0{ \u00a0\u00a0\u00a0\"sourceId\": \"links\", \u00a0\u00a0\u00a0\"name\": \"Links\", \u00a0\u00a0\u00a0\"priority\": 1 \u00a0} ]<\/code><\/pre>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433 \u0441\u043a\u0430\u0436\u0435\u0442 \u043d\u0430\u043c, \u0432 \u043a\u0430\u043a\u0438\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u0438 \u0431\u0443\u0434\u0435\u043c \u0445\u043e\u0434\u0438\u0442\u044c \u0438 \u0432 \u043a\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u0435\u043a\u0446\u0438\u0438 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 \u0432\u044b\u0434\u0430\u0447\u0438. \u041c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0447\u0430\u0441\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430, \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0434\u043e\u043b\u0433\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0438\u043b\u0438 \u0432\u043e\u0432\u0441\u0435 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u043c\u044b \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 (\u043f\u043e\u043b\u0435 priority). \u0421\u0430\u043c\u044b\u0435 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0435 \u0438 \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u0430\u043c\u044b\u0439 \u043d\u0438\u0437\u043a\u0438\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432\u043d\u0438\u0437\u0443 \u0432\u044b\u0434\u0430\u0447\u0438.<\/p>\n<p>\u041f\u043e\u043b\u0435 name \u2014 \u0438\u043c\u044f \u0441\u0435\u043a\u0446\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438 \u0432 UI. \u041f\u043e\u043b\u0435 sourceId \u2014 ID \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u0430. \u041f\u043e \u043d\u0435\u043c\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f sourceId:users \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441:<\/p>\n<pre><code class=\"typescript\">\"\/api\/extra-search\/users?q=ivan\"<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0441 \u0444\u0440\u043e\u043d\u0442\u0430 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u0430\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 BFF, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442 \u0432\u0441\u0435 \u044d\u0442\u0438 \u0440\u0443\u0447\u043a\u0438 \u0432\u043c\u0435\u0441\u0442\u0435, \u0434\u043e\u0436\u0434\u0435\u0442\u0441\u044f \u0438\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0442\u0434\u0430\u0441\u0442 \u0435\u0434\u0438\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442? \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u044d\u043a \u043e\u0442\u0434\u0430\u0441\u0442 \u043e\u0442\u0432\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0434\u0443\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u0445 \u0440\u0443\u0447\u0435\u043a, \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432\u044b\u0434\u0430\u0441\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.<\/p>\n<p>\u041c\u044b \u0436\u0435 \u0445\u043e\u0442\u0438\u043c \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u043d\u044c\u0448\u0435, \u043f\u043e \u043c\u0435\u0440\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. \u041f\u043e\u043a\u0430 \u0441\u0430\u043c\u044b\u0435 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 \u0432\u044b\u0434\u0430\u0447\u0438 \u0442\u043e, \u0447\u0442\u043e \u0438\u0441\u043a\u0430\u043b. \u0418 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443, \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c, \u043f\u043e\u043a\u0430 \u0432\u0435\u0441\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u0440\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f.<\/p>\n<p>\u041f\u043e\u043a\u0430 \u0436\u0434\u0435\u043c \u043e\u0442\u0432\u0435\u0442\u044b \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0440\u0438\u0441\u0443\u0435\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435: \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0435\u043a\u0446\u0438\u0439<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u043a\u0430\u043a\u043e\u043c\u0443-\u043b\u0438\u0431\u043e \u0438\u0437 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u043f\u0440\u0438\u0448\u043b\u0438, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0438\u0445 \u0432 \u0432\u044b\u0434\u0430\u0447\u0435, \u0430 \u043f\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u043c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0438\u0441\u043a. \u041e\u043d \u0442\u0443\u0442 \u0436\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0441\u044f \u0432 \u0432\u044b\u0434\u0430\u0447\u0435, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u0436\u0434\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u043f\u043e\u0434 \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u0430\u043c\u0438.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u043c\u0435\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0435\u043a\u0446\u0438\u0439, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0438\u0448\u0435\u043b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0438\u0437 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u043e\u0442\u0432\u0430\u043b\u0438\u043b\u0441\u044f, \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e, \u0431\u0443\u0434\u0442\u043e \u0431\u044b \u0435\u0433\u043e \u0438 \u043d\u0435 \u0431\u044b\u043b\u043e \u0432 \u0432\u044b\u0434\u0430\u0447\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 (\u0441\u0435\u043a\u0446\u0438\u044f Users) \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438\u0441\u044c \u0438 \u0432\u044b\u0432\u0435\u043b\u0438\u0441\u044c \u0432 \u0432\u044b\u0434\u0430\u0447\u0443, \u0430 \u0432\u043e\u0442 \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u043e\u0442\u0432\u0430\u043b\u0438\u043b\u0441\u044f \u0438\u0437-\u0437\u0430 \u043e\u0448\u0438\u0431\u043a\u0438. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0435\u043a\u0446\u0438\u044f \u0441\u0441\u044b\u043b\u043e\u043a (Links) \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u0440\u043e\u043f\u0430\u0434\u0435\u0442 \u0438\u0437 \u0432\u044b\u0434\u0430\u0447\u0438.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u043c\u0435\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0441\u0435\u043a\u0446\u0438\u0438, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0438\u0441\u043a \u043e\u0442\u0432\u0430\u043b\u0438\u043b\u0441\u044f \u0438\u0437-\u0437\u0430 \u043e\u0448\u0438\u0431\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<h2>\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/h2>\n<p>\u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043e\u0442 \u0432\u0432\u043e\u0434\u0430 \u0434\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044d\u0442\u0430\u043f\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u0432\u0432\u043e\u0434 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0431\u044d\u043a;<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0442\u043e\u043a\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0435\u0434\u0438\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0432\u044b\u0434\u0430\u0447\u0438 \u0432 UI.<\/p>\n<\/li>\n<\/ul>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u044d\u0442\u0430\u043f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438. \u0428\u0430\u0431\u043b\u043e\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u044b\u0434\u0430\u0447\u0438 \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u042d\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438 \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u043c\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438 \u0438\u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438.<\/p>\n<pre><code class=\"typescript\">@if (status === 'tooShortQuery') { \u00a0\u00a0&lt;!-- 1) \u041f\u0440\u043e\u0441\u044c\u0431\u0430 \u0432\u0432\u0435\u0441\u0442\u0438 \u0431\u043e\u043b\u0435\u0435 3-\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 --&gt; } @else if (status === 'error') { \u00a0\u00a0&lt;!-- 2) \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 --&gt; } @else if (status === 'pendingTyping') { \u00a0\u00a0&lt;!-- 3) \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0438 \u0432\u0432\u043e\u0434\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 --&gt; } @else { \u00a0\u00a0&lt;!-- 4) \u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438 --&gt; \u00a0\u00a0&lt;!-- 5) \u0418\u043b\u0438 \u0431\u043b\u043e\u043a\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u0430--&gt; }<\/code><\/pre>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p><em>pendingTyping: <\/em>\u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0435 \u0432\u0432\u043e\u0434\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p><em>tooShortQuery<\/em>: \u043f\u0440\u043e\u0441\u044c\u0431\u0430 \u0432\u0432\u0435\u0441\u0442\u0438 \u0431\u043e\u043b\u0435\u0435 3 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><em>historyAndPopular<\/em>: \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0431\u043b\u043e\u043a\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u044d\u0442\u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">const resultState$: Observable&lt;SearchResultState&gt; = \u00a0\u00a0\u00a0\u00a0this.control.valueChanges.pipe( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0startWith(''), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0switchMap(query =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const state = { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0pendingTyping: { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0status: 'pendingTyping', \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0422\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 tui-search-results. \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u043f\u0443\u0441\u0442\u043e\u0435, \u0430 \u0432 results \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c data: null \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u0431\u043b\u043e\u043a \u0441 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c\u0438 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439. \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0historyAndPopular: { status: 'ready', data: null }, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0tooShortQuery: { status: 'tooShortQuery' }, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} as const;  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!query &amp;&amp; this.control.value) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return of(state.pendingTyping); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!query) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0431\u043b\u043e\u043a\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return of(state.historyAndPopular); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (query.length &lt; 3) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return of(state.tooShortQuery); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043f\u043e\u0438\u0441\u043a \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return this.searchService.makeSearch$(query); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}) \u00a0\u00a0\u00a0\u00a0);<\/code><\/pre>\n<h2>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043f\u0440\u043e\u0448\u043b\u0438 \u0432\u0441\u0435 \u044d\u0442\u0430\u043f\u044b \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438, \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043f\u043e\u0438\u0441\u043a. \u041e\u043d \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0439:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u0445\u0435\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u0445<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0431\u044d\u043a:<\/p>\n<pre><code class=\"typescript\">\u00a0function makeMainSearch$(query: string) { \u00a0\u00a0\u00a0\u00a0return this.http \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.get(`${this.baseUrl}\/main-search?q=${query}`) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.pipe( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0map(result =&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Object.entries(result).reduce( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0(acc, [key, data]) =&gt; ({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...acc, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[key]: data.map(item =&gt; ({ data: item })), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{} as SearchResult \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u041f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0438\u0441\u0443\u0435\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0434\u043b\u044f \u0441\u0435\u043a\u0446\u0438\u0439 \u043f\u043e\u0441\u0442\u043e\u0432 \u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0startWith&lt;SearchResult&gt;({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Posts: [{ loading: true }], \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Articles: [{ loading: true }], \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0); \u00a0\u00a0}<\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433 \u0434\u043b\u044f \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432:<\/p>\n<pre><code class=\"typescript\">const extraSearchSources$ = this.http \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.get(`${this.baseUrl}\/extra-search-sources`) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.pipe( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u0435\u043a\u0446\u0438\u0439 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0map(items =&gt; items.sort((a, b) =&gt; a.priority - b.priority)), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0448\u0438\u0431\u043a\u0438\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0catchError(() =&gt; of([])), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0437\u0430\u043a\u044d\u0448\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0shareReplay(1) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);<\/code><\/pre>\n<p>\u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443 \u0434\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043c \u043f\u0430\u0447\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0431\u044d\u043a:<\/p>\n<pre><code class=\"typescript\">\u00a0function makeExtraSearch$(query: string) { \u00a0\u00a0\u00a0\u00a0const initialValue:<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-470607","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/470607","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=470607"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/470607\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=470607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=470607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=470607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}