{"id":7005,"date":"2023-01-20T23:25:08","date_gmt":"2023-01-20T23:25:08","guid":{"rendered":"https:\/\/davelevy.info\/wiki\/?p=7005"},"modified":"2023-05-28T08:57:43","modified_gmt":"2023-05-28T08:57:43","slug":"making-a-searchbox","status":"publish","type":"post","link":"https:\/\/davelevy.info\/wiki\/making-a-searchbox\/","title":{"rendered":"Making a searchbox"},"content":{"rendered":"\n<p>I made this in January as I sought to make a search page for <a href=\"https:\/\/dfl.ddns.net\/\">my Hugo site<\/a>. I have <a href=\"https:\/\/davelevy.info\/wiki\/search\/\">made a search page<\/a> for this site, using a jetpack widget, although with the new theme, a search bar is now offered on every post and index page.<\/p>\n\n\n\n<p>I found another use case to make a search bar. <\/p>\n\n\n\n<p>I made a search with a mandatory additional keywords on my <a href=\"https:\/\/davelevy.info\/wiki\/rise-of-empires\/\">Rise of Empire<\/a> page; this is to avoid typing the RoE qualifier each time. I got the form &amp; script code from Chat GPT and then spent ages working out the CSS to work with this theme&#8217;s predefined CSS. I have <a href=\"https:\/\/www.diigo.com\/user\/davelevy?query=%23html+%23search\">bookmarked the pages<\/a> that helped me in diigo.<\/p>\n\n\n\n<p>Here is the code; I needed the <em>style <\/em>statement on the input element to avoid having the search button on the next line. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">      &lt;form action=\"https:\/\/www.google.com\/search\" method=\"get\" target=\"_blank\">\n        &lt;input type=\"text\" name=\"q\" id=\"search-input\" \n               style=\"width:50%; display:inline-block;margin-left: 8px;\" \/>\n        &lt;button type=\"submit\">Search&lt;\/button>\n      &lt;\/form>\n  \n      &lt;script>\n      document.getElementById(\"search-input\").value = \n          '  \"Rise of Empires: Ice &amp; Fire\"';\n      &lt;\/script><\/pre>\n\n\n\n<p>Hugo is not great at this, as I wanted on on my 404 page; I found a template I liked, which had a serach box embedded. I use <a href=\"https:\/\/pagedart.com\/blog\/how-to-add-a-search-bar-in-html\/\">this page <\/a>to build one. It works quite nicely but there is a smallbug, and the site https:\/\/dfl.ddns.net doesn&#8217;t seem to have any entries in the google index and so I dropped the search box.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I made this in January as I sought to make a search page for my Hugo site. I have made a search page for this site, using a jetpack widget, although with the new theme, a search bar is now offered on every post and index page. I found another use case to make a&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6667,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_share_on_mastodon":"0"},"categories":[3],"tags":[251,253,322,144,1887,911],"class_list":["post-7005","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-css","tag-html","tag-javascript","tag-search","tag-searchbox","tag-technology"],"share_on_mastodon":{"url":"","error":""},"jetpack_featured_media_url":"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2022\/01\/html-from-makeuseof_com-w1024c.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/7005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/comments?post=7005"}],"version-history":[{"count":5,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/7005\/revisions"}],"predecessor-version":[{"id":8147,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/7005\/revisions\/8147"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media\/6667"}],"wp:attachment":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media?parent=7005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/categories?post=7005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/tags?post=7005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}