Searchbox

by Kevin_Granger

HTML

<form novalidate="novalidate" onsubmit="return false;" class="searchbox" style="visibility:hidden;height:0"><div role="search" class="searchbox__wrapper"><input id="docsearch" type="search" name="search" placeholder="Search in the doc" autocomplete="off" required="required" class="searchbox__input"><button type="submit" title="Submit your search query." class="searchbox__submit" ><svg role="img" aria-label="Search"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use></svg></button><button type="reset" title="Clear the search query." class="searchbox__reset hide"><svg role="img" aria-label="Reset"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-3"></use></svg></button></div></form><div class="svg-icons" style="height: 0; width: 0; position: absolute; visibility: hidden"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="sbx-icon-clear-3" viewBox="0 0 40 40"><path d="M16.228 20L1.886 5.657 0 3.772 3.772 0l1.885 1.886L20 16.228 34.343 1.886 36.228 0 40 3.772l-1.886 1.885L23.772 20l14.342 14.343L40 36.228 36.228 40l-1.885-1.886L20 23.772 5.657 38.114 3.772 40 0 36.228l1.886-1.885L16.228 20z" fill-rule="evenodd"/></symbol><symbol id="sbx-icon-search-13" viewBox="0 0 40 40"><path d="M26.806 29.012a16.312 16.312 0 0 1-10.427 3.746C7.332 32.758 0 25.425 0 16.378 0 7.334 7.333 0 16.38 0c9.045 0 16.378 7.333 16.378 16.38 0 3.96-1.406 7.593-3.746 10.426L39.547 37.34c.607.608.61 1.59-.004 2.203a1.56 1.56 0 0 1-2.202.004L26.807 29.012zm-10.427.627c7.322 0 13.26-5.938 13.26-13.26 0-7.324-5.938-13.26-13.26-13.26-7.324 0-13.26 5.936-13.26 13.26 0 7.322 5.936 13.26 13.26 13.26z" fill-rule="evenodd"/></symbol></svg></div><script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>

CSS

.algolia-autocomplete{display:block;width:100%;height:100%}.algolia-docsearch-footer{width:100px;height:20px;z-index:2000;margin-top:8px;float:right;font-size:0;line-height:0}.algolia-docsearch-footer--logo{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iODZweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgODYgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+c2VhcmNoLWJ5LWFsZ29saWE8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJwb3dlcmVkLWJ5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNi4wMDAwMDAsIC0zMi4wMDAwMDApIj4gICAgICAgICAgICA8ZyBpZD0ic2VhcmNoLWJ5LWFsZ29saWEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMDAwMDAwLCAzMi4wMDAwMDApIj4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTUuMDA5NzY1NjIsOC4xMDA1ODU5NCBDNS4wMDk3NjU2Miw4LjcyODg0NDI5IDQuNzgxOTAzMzIsOS4yMTg3NDgyNCA0LjMyNjE3MTg4LDkuNTcwMzEyNSBDMy44NzA0NDA0Myw5LjkyMTg3Njc2IDMuMjUxOTU3MDMsMTAuMDk3NjU2MiAyLjQ3MDcwMzEyLDEwLjA5NzY1NjIgQzEuNjI0MzQ0NzMsMTAuMDk3NjU2MiAwLjk3MzMwOTU3LDkuOTg4NjA3ODYgMC41MTc1NzgxMjUsOS43NzA1MDc4MSBMMC41MTc1NzgxMjUsOC45Njk3MjY1NiBDMC44MTA1NDgzNCw5LjA5MzQyNTEgMS4xMjk1NTU1Nyw5LjE5MTA4MDM3IDEuNDc0NjA5MzgsOS4yNjI2OTUzMSBDMS44MTk2NjMxOCw5LjMzNDMxMDI1IDIuMTYxNDU2NjQsOS4zNzAxMTcxOSAyLjUsOS4zNzAxMTcxOSBDMy4wNTMzODgxOCw5LjM3MDExNzE5IDMuNDcwMDUwNjgsOS4yNjUxMzc3NyAzLjc1LDkuMDU1MTc1NzggQzQuMDI5OTQ5MzIsOC44NDUyMTM3OSA0LjE2OTkyMTg4LDguNTUzMDYxNzcgNC4xNjk5MjE4OCw4LjE3ODcxMDk0IEM0LjE2OTkyMTg4LDcuOTMxMzEzODcgNC4xMjAyODA0NCw3LjcyODY3OTE3IDQuMDIwOTk2MDksNy41NzA4MDA3OCBDMy45MjE3MTE3NCw3LjQxMjkyMjM5IDMuNzU1Njk3NzgsNy4yNjcyNTMyNyAzLjUyMjk0OTIyLDcuMTMzNzg5MDYgQzMuMjkwMjAwNjYsNy4wMDAzMjQ4NSAyLjkzNjIwMDI5LDYuODQ4OTU5MTggMi40NjA5Mzc1LDYuNjc5Njg3NSBDMS43OTY4NzE2OCw2LjQ0MjA1NjEgMS4zMjI0Mjk4MSw2LjE2MDQ4MzQgMS4wMzc1OTc2Niw...

JavaScript

var myDocsearch = docsearch({indexName: "stripe",apiKey: "cf0698644c254f8884f9aa87391c8154",inputSelector: "#docsearch", });