{"id":982,"date":"2023-11-21T17:11:00","date_gmt":"2023-11-21T15:11:00","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=982"},"modified":"2024-09-13T09:25:04","modified_gmt":"2024-09-13T06:25:04","slug":"website-search-box-with-dropdown-tooltip-suggestions","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/","title":{"rendered":"Website Search Box with Dropdown Tooltip Suggestions"},"content":{"rendered":"

Search functionality is crucial to improve the user experience, making navigation on the website much easier. This functionality is built into WordPress and almost every other CMS, but in this article I’m going to present a custom and very lightweight HTML-CSS-JS-jQuery<\/a> solution that is very easy to implement.<\/strong><\/p>\n

\"website<\/p>\n

<\/p>\n

This will be a great Google Custom Search<\/a> alternative or you can customize the code according to your needs. Try the live demo<\/a> here or visit the Rubik’s Cube Wiki<\/a> to see it on a live site.<\/p>\n

You are welcome to copy, edit and publish this code for free but please do link back to our website if you use it.<\/p>\n

HTML Code<\/h2>\n

We need to wrap everything into a div element that can be displayed as an inline block. We need a close button to erase the input, hide the dropdown and reset the search. Next is an input field and another div that will be populated with the suggested liks.<\/p>\n

<<\/span>div<\/span> id<\/span>=<\/span>\"wrapTooltipSearch\"<\/span>><\/span>\n\t<<\/span>div<\/span> id<\/span>=<\/span>\"abortTooltipSearch\"<\/span>><\/span>\n\t\t&times;\n\t<\/<\/span>div<\/span>><\/span>\n\t<<\/span>input<\/span> type<\/span>=<\/span>\"text\"<\/span> id<\/span>=<\/span>\"tooltipSearch\"<\/span> placeholder<\/span>=<\/span>\"Search...\"<\/span> \/><\/span>\n\t<<\/span>div<\/span> id<\/span>=<\/span>\"tooltipSearchSuggestions\"<\/span>><\/span>\n\t<\/<\/span>div<\/span>><\/span>\n<\/<\/span>div<\/span>><\/span>\n<\/pre>\n
JavaScript<\/h2>\n
The JavaScript is using jQuery library and it’s less than 50 uncompressed lines. It’s parsing the targeted section on the website and collects all links. In this case it parses the links in the .navigation<\/strong> div. Make sure to change this according to your requirements.<\/p>\n
var<\/span> ttLinks =<\/span> [<\/span>0<\/span>,<\/span> 1<\/span>]<\/span>;<\/span>\nvar<\/span> ttAnchors =<\/span> [<\/span>0<\/span>,<\/span> 1<\/span>]<\/span>;<\/span>\nvar<\/span> i;<\/span>\n$(<\/span>document)<\/span>.<\/span>ready(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n\ti =<\/span> 0<\/span>;<\/span>\n\t$(<\/span>\"<\/span>.navigation a<\/span>\"<\/span>)<\/span>.<\/span>each(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n\t\tttLinks[<\/span>i]<\/span> =<\/span> $(<\/span>this<\/span>)<\/span>.<\/span>attr(<\/span>\"<\/span>href<\/span>\"<\/span>)<\/span>;<\/span>\n\t\tttAnchors[<\/span>i]<\/span> =<\/span> $(<\/span>this<\/span>)<\/span>.<\/span>text(<\/span>)<\/span>;<\/span>\n\t\ti++<\/span>;<\/span>\n\t\tconsole.<\/span>log<\/span>(<\/span>ttLinks[<\/span>i]<\/span>)<\/span>;<\/span>\n\t\tconsole.<\/span>log<\/span>(<\/span>ttAnchors[<\/span>i]<\/span>)<\/span>;<\/span>\n\t}<\/span>)<\/span>;<\/span>\n\t$(<\/span>\"<\/span>#abortTooltipSearch<\/span>\"<\/span>)<\/span>.<\/span>click(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n\t\t$(<\/span>\"<\/span>#tooltipSearch<\/span>\"<\/span>)<\/span>.<\/span>val(<\/span>\"<\/span>\"<\/span>)<\/span>;<\/span>\n\t\tupdateTooltipSearch(<\/span>)<\/span>;<\/span>\n\t}<\/span>)<\/span>;<\/span>\n\t$(<\/span>\"<\/span>#tooltipSearch<\/span>\"<\/span>)<\/span>.<\/span>keyup(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n\t\tupdateTooltipSearch(<\/span>)<\/span>;<\/span>\n\t}<\/span>)<\/span>;<\/span>\n\t$(<\/span>\"<\/span>#tooltipSearch<\/span>\"<\/span>)<\/span>.<\/span>change(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n\t\tupdateTooltipSearch(<\/span>)<\/span>;<\/span>\n\t}<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\nfunction<\/span> updateTooltipSearch(<\/span>)<\/span> {<\/span>\n\tvar<\/span> squery =<\/span> $(<\/span>\"<\/span>#tooltipSearch<\/span>\"<\/span>)<\/span>.<\/span>val(<\/span>)<\/span>.<\/span>toLowerCase<\/span>(<\/span>)<\/span>;<\/span>\t\n\tvar<\/span> tooltips =<\/span> '<\/span>'<\/span>;<\/span>\n\tvar<\/span> results =<\/span> 0<\/span>;<\/span>\n\tif<\/span> (<\/span>squery.<\/span>length<\/span> ><\/span> 1<\/span>)<\/span> {<\/span>\n\t\tfor<\/span> (<\/span>i =<\/span> 0<\/span>;<\/span> i <<\/span> ttLinks.<\/span>length<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>\n\t\t\tif<\/span> (<\/span> (<\/span>ttAnchors[<\/span>i]<\/span>.<\/span>toLowerCase<\/span>(<\/span>)<\/span>.<\/span>includes(<\/span>squery)<\/span>)<\/span> ||<\/span> (<\/span>ttLinks[<\/span>i]<\/span>.<\/span>toLowerCase<\/span>(<\/span>)<\/span>.<\/span>includes(<\/span>squery)<\/span>)<\/span>)<\/span> {<\/span>\n\t\t\t\ttooltips +=<\/span> '<\/span><a href=\"<\/span>'<\/span> +<\/span> ttLinks[<\/span>i]<\/span> +<\/span> '<\/span>\"><\/span>'<\/span> +<\/span> ttAnchors[<\/span>i]<\/span> +<\/span>'<\/span><\/a><\/span>'<\/span>;<\/span>\n\t\t\t\tresults ++<\/span>;<\/span>\n\t\t\t}<\/span>\n\t\t}<\/span>\n\t\tif<\/span> (<\/span>results ==<\/span> 0<\/span>)<\/span> {<\/span>\n\t\t\ttooltips =<\/span> \"<\/span><em><strong>No results<\/strong><br \/>Try something else.<\/em><\/span>\"<\/span>;<\/span>\n\t\t}<\/span>\n\t\t$(<\/span>\"<\/span>#tooltipSearchSuggestions, #abortTooltipSearch<\/span>\"<\/span>)<\/span>.<\/span>fadeIn(<\/span>222<\/span>)<\/span>;<\/span>\n\t}<\/span> else<\/span> {<\/span>\n\t\tif<\/span> (<\/span>squery.<\/span>length<\/span> ==<\/span> 0<\/span>)<\/span> {<\/span>\n\t\t\t$(<\/span>\"<\/span>#tooltipSearchSuggestions, #abortTooltipSearch<\/span>\"<\/span>)<\/span>.<\/span>fadeOut(<\/span>222<\/span>)<\/span>;<\/span>\n\t\t}<\/span> else<\/span> {<\/span>\n\t\t\ttooltips =<\/span> \"<\/span><em>Enter 2 characters<\/em><\/span>\"<\/span>;<\/span>\n\t\t\t$(<\/span>\"<\/span>#tooltipSearchSuggestions, #abortTooltipSearch<\/span>\"<\/span>)<\/span>.<\/span>fadeIn(<\/span>222<\/span>)<\/span>;<\/span>\n\t\t}<\/span>\n\t}<\/span>\n\t$(<\/span>\"<\/span>#tooltipSearchSuggestions<\/span>\"<\/span>)<\/span>.<\/span>html(<\/span>tooltips)<\/span>;<\/span>\n}<\/span>\n<\/pre>\n
The CSS styles<\/h2>\n
All we need is 7 rules to style this simple search widget. Set up your custom design if you don’t like the default look.<\/p>\n
#<\/span>wrapTooltipSearch {<\/span>position<\/span>:<\/span> relative<\/span>;<\/span>width<\/span>:<\/span> 200<\/span>px<\/span>;<\/span>}<\/span>\n#<\/span>abortTooltipSearch {<\/span>background<\/span>:<\/span> #<\/span>406b98<\/span>;<\/span>color<\/span>:<\/span> #<\/span>FFF<\/span>;<\/span>border-radius<\/span>:<\/span> 10<\/span>px<\/span>;<\/span>position<\/span>:<\/span> absolute<\/span>;<\/span>top<\/span>:<\/span> -<\/span>5<\/span>px<\/span>;<\/span>right<\/span>:<\/span> -<\/span>17<\/span>px<\/span>;<\/span>width<\/span>:<\/span> 15<\/span>px<\/span>;<\/span>height<\/span>:<\/span> 15<\/span>px<\/span>;<\/span>line-height<\/span>:<\/span> 15<\/span>px<\/span>;<\/span>text-align<\/span>:<\/span> center<\/span>;<\/span>font-weight<\/span>:<\/span> bold<\/span>;<\/span>cursor<\/span>:<\/span> pointer<\/span>;<\/span>display<\/span>:<\/span> none<\/span>;<\/span>}<\/span>\n#<\/span>tooltipSearch {<\/span>border<\/span>:<\/span> 1<\/span>px<\/span> solid<\/span> #<\/span>222<\/span>;<\/span>border-radius<\/span>:<\/span> 5<\/span>px<\/span>;<\/span>font-size<\/span>:<\/span> 1.2<\/span>em<\/span>;<\/span>outline<\/span>:<\/span> none<\/span>;<\/span>padding<\/span>:<\/span> 2<\/span>px<\/span> 5<\/span>px<\/span>;<\/span>display<\/span>:<\/span> block<\/span>;<\/span>width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>}<\/span>\n#<\/span>tooltipSearchSuggestions {<\/span>border<\/span>:<\/span> 1<\/span>px<\/span> solid<\/span> #<\/span>222<\/span>;<\/span>position<\/span>:<\/span> absolute<\/span>;<\/span>max-height<\/span>:<\/span> 200<\/span>px<\/span>;<\/span>overflow<\/span>:<\/span> auto<\/span>;<\/span>background<\/span>:<\/span> #<\/span>FFF<\/span>;<\/span>padding<\/span>:<\/span> 5<\/span>px<\/span> 0<\/span>px<\/span>;<\/span>width<\/span>:<\/span> 280<\/span>px<\/span>;<\/span>display<\/span>:<\/span> none<\/span>;<\/span>box-shadow<\/span>:<\/span> 5<\/span>px<\/span> 5<\/span>px<\/span> 8<\/span>px<\/span> #<\/span>000<\/span>;<\/span>border-radius<\/span>:<\/span> 10<\/span>px<\/span>;<\/span>}<\/span>\n#<\/span>tooltipSearchSuggestions a<\/span> {<\/span>text-decoration<\/span>:<\/span> none<\/span>;<\/span>display<\/span>:<\/span> block<\/span>;<\/span>padding<\/span>:<\/span> 1<\/span>px<\/span> 5<\/span>px<\/span>;<\/span>cursor<\/span>:<\/span> pointer<\/span>;<\/span>}<\/span>\n#<\/span>tooltipSearchSuggestions a<\/span>:<\/span>hover<\/span> {<\/span>background<\/span>:<\/span> #<\/span>dde6ef<\/span>;<\/span>color<\/span>:<\/span> #<\/span>000<\/span>;<\/span>}<\/span>\n#<\/span>tooltipSearchSuggestions em<\/span> {<\/span>display<\/span>:<\/span> block<\/span>;<\/span>padding<\/span>:<\/span> 10<\/span>px<\/span>;<\/span>}<\/span>\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Search functionality is crucial to improve the user experience, making navigation on the website much easier. This functionality is built into WordPress and almost every other CMS, but in this article I’m going to present a custom and very lightweight HTML-CSS-JS-jQuery solution that is very easy to implement.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,3,6,8],"tags":[],"class_list":["post-982","post","type-post","status-publish","format-standard","hentry","category-articles","category-freebies","category-jquery","category-tools"],"yoast_head":"\nWebsite Search Box with Dropdown Tooltip Suggestions<\/title>\n<meta name=\"description\" content=\"Search functionality is crucial to improve the user experience, making navigation on the website much easier.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website Search Box with Dropdown Tooltip Suggestions\" \/>\n<meta property=\"og:description\" content=\"Search functionality is crucial to improve the user experience, making navigation on the website much easier.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-21T15:11:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-13T06:25:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/demo\/website-search\/website-search-tooltip-dropdown.jpg\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"Website Search Box with Dropdown Tooltip Suggestions\",\"datePublished\":\"2023-11-21T15:11:00+00:00\",\"dateModified\":\"2024-09-13T06:25:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/\"},\"wordCount\":244,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/demo\/website-search\/website-search-tooltip-dropdown.jpg\",\"articleSection\":[\"Articles\",\"Freebies\",\"jQuery\",\"Tools\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/\",\"url\":\"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/\",\"name\":\"Website Search Box with Dropdown Tooltip Suggestions\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/demo\/website-search\/website-search-tooltip-dropdown.jpg\",\"datePublished\":\"2023-11-21T15:11:00+00:00\",\"dateModified\":\"2024-09-13T06:25:04+00:00\",\"description\":\"Search functionality is crucial to improve the user experience, making navigation on the website much easier.\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/demo\/website-search\/website-search-tooltip-dropdown.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/demo\/website-search\/website-search-tooltip-dropdown.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website Search Box with Dropdown Tooltip Suggestions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Website Search Box with Dropdown Tooltip Suggestions","description":"Search functionality is crucial to improve the user experience, making navigation on the website much easier.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/","og_locale":"en_GB","og_type":"article","og_title":"Website Search Box with Dropdown Tooltip Suggestions","og_description":"Search functionality is crucial to improve the user experience, making navigation on the website much easier.","og_url":"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2023-11-21T15:11:00+00:00","article_modified_time":"2024-09-13T06:25:04+00:00","og_image":[{"url":"https:\/\/html-online.com\/demo\/website-search\/website-search-tooltip-dropdown.jpg","type":"","width":"","height":""}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"Website Search Box with Dropdown Tooltip Suggestions","datePublished":"2023-11-21T15:11:00+00:00","dateModified":"2024-09-13T06:25:04+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/"},"wordCount":244,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/demo\/website-search\/website-search-tooltip-dropdown.jpg","articleSection":["Articles","Freebies","jQuery","Tools"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/","url":"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/","name":"Website Search Box with Dropdown Tooltip Suggestions","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/demo\/website-search\/website-search-tooltip-dropdown.jpg","datePublished":"2023-11-21T15:11:00+00:00","dateModified":"2024-09-13T06:25:04+00:00","description":"Search functionality is crucial to improve the user experience, making navigation on the website much easier.","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/#primaryimage","url":"https:\/\/html-online.com\/demo\/website-search\/website-search-tooltip-dropdown.jpg","contentUrl":"https:\/\/html-online.com\/demo\/website-search\/website-search-tooltip-dropdown.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/website-search-box-with-dropdown-tooltip-suggestions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Website Search Box with Dropdown Tooltip Suggestions"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=982"}],"version-history":[{"count":3,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/982\/revisions"}],"predecessor-version":[{"id":1409,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/982\/revisions\/1409"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}