{"id":14363,"date":"2020-06-05T07:29:24","date_gmt":"2020-06-05T07:29:24","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=14363"},"modified":"2020-06-06T13:55:27","modified_gmt":"2020-06-06T13:55:27","slug":"how-to-search-html-page-or-content","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-search-html-page-or-content\/","title":{"rendered":"Filtering and sorting search results in an HTML page"},"content":{"rendered":"\n<p><strong>Step:1<\/strong> &#8211; Create first  html page. with any name example(search.html)<\/p>\n\n\n\n<p><strong>Step:2<\/strong> &#8211; Create a second Html page.with any name example(page-one.html)<\/p>\n\n\n\n<p><strong>Step:3<\/strong>  Then create a json page like that (data.json).<\/p>\n\n\n\n<p>let  Start to crate html page: <strong>Step:1<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"610\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/search-1-1024x610.png\" alt=\"\" class=\"wp-image-14368\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/search-1-1024x610.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/search-1-300x179.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/search-1-768x457.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/search-1-1536x915.png 1536w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/search-1.png 1573w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"613\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/step-ii-1024x613.png\" alt=\"\" class=\"wp-image-14370\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/step-ii-1024x613.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/step-ii-300x180.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/step-ii-768x460.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/step-ii-1536x920.png 1536w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/step-ii.png 1551w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/scropt-1024x498.png\" alt=\"\" class=\"wp-image-14373\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/scropt-1024x498.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/scropt-300x146.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/scropt-768x373.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/scropt.png 1510w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<script src=\"https:\/\/gist.github.com\/samcotocus\/ba99b41cd838737d6ed6d1663f912575.js\"><\/script>\n\n\n\n<script src=\"https:\/\/gist.github.com\/samcotocus\/2dbba7082592aec0599c2bd894bda68d.js\"><\/script>\n\n\n\n<script src=\"https:\/\/gist.github.com\/samcotocus\/a60505cc37f7968761860aa8754815fe.js\"><\/script>\n\n\n\n<p>After save this page and run on the browser it will look like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"446\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/browser-1024x446.png\" alt=\"\" class=\"wp-image-14377\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/browser-1024x446.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/browser-300x131.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/browser-768x334.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/browser-1536x669.png 1536w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/browser.png 1913w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Step:2<\/strong>&#8211; Then create second page of html<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"638\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/page-one-1024x638.png\" alt=\"\" class=\"wp-image-14378\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/page-one-1024x638.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/page-one-300x187.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/page-one-768x479.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/page-one.png 1503w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<script src=\"https:\/\/gist.github.com\/samcotocus\/2ad80d372609d517d1aabbe75ec7bbfb.js\"><\/script>\n\n\n\n<p><strong>Step:3<\/strong>&#8211;  Then create the data json page  (data.json)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/datajson-1024x576.png\" alt=\"\" class=\"wp-image-14384\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/datajson-1024x576.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/datajson-300x169.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/datajson-768x432.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/datajson-355x199.png 355w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/datajson.png 1523w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<script src=\"https:\/\/gist.github.com\/samcotocus\/de5cc50931142c855fdc36dbbbaa48f5.js\"><\/script>\n\n\n\n<p>And finally we can search page whatever put the keyword name.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"368\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/cancer-1024x368.png\" alt=\"\" class=\"wp-image-14386\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/cancer-1024x368.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/cancer-300x108.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/cancer-768x276.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/cancer.png 1305w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Step:1 &#8211; Create first html page. with any name example(search.html) Step:2 &#8211; Create a second Html page.with any name example(page-one.html) Step:3 Then create a json page like that (data.json). let Start to crate html page: Step:1 After save this page and run on the browser it will look like this. Step:2&#8211; Then create second page&#8230;<\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[1],"tags":[4459,6117],"class_list":["post-14363","post","type-post","status-publish","format-standard","hentry","category-sql","tag-html","tag-search-page"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/14363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=14363"}],"version-history":[{"count":4,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/14363\/revisions"}],"predecessor-version":[{"id":14510,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/14363\/revisions\/14510"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=14363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=14363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=14363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}