{"id":14975416,"url":"https://github.com/jquery/typesense-minibar","last_synced_at":"2025-04-11T12:00:38.967Z","repository":{"id":153099276,"uuid":"624622448","full_name":"jquery/typesense-minibar","owner":"jquery","description":"Fast 2kB autocomplete search bar. Alternative to Algolia DocSearch, InstantSearch, and autocomplete-js.","archived":false,"fork":false,"pushed_at":"2024-08-24T04:09:03.000Z","size":492,"stargazers_count":61,"open_issues_count":1,"forks_count":6,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-25T08:20:56.315Z","etag":null,"topics":["nobuild"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jquery.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-06T22:09:56.000Z","updated_at":"2025-02-25T14:57:07.000Z","dependencies_parsed_at":"2023-12-04T19:28:36.517Z","dependency_job_id":"0e3131ee-42be-4257-bb14-510844c93e22","html_url":"https://github.com/jquery/typesense-minibar","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jquery%2Ftypesense-minibar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jquery%2Ftypesense-minibar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jquery%2Ftypesense-minibar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jquery%2Ftypesense-minibar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jquery","download_url":"https://codeload.github.com/jquery/typesense-minibar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248394170,"owners_count":21096551,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nobuild"],"created_at":"2024-09-24T13:52:00.063Z","updated_at":"2025-04-11T12:00:38.897Z","avatar_url":"https://github.com/jquery.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"assets/logo-text.svg\" height=\"100\" alt=\"minibar\"\u003e\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Continuous integration](https://github.com/jquery/typesense-minibar/actions/workflows/CI.yaml/badge.svg)](https://github.com/jquery/typesense-minibar/actions/workflows/CI.yaml?query=event%3Apush+branch%3Amain)\n[![Test coverage](https://img.shields.io/badge/coverage-95%25-brightgreen.svg)](https://jquery.github.io/typesense-minibar/coverage/)\n[![Tested with QUnit](https://img.shields.io/badge/tested_with-qunit-9c3493.svg)](https://qunitjs.com/)\n\n\u003c/div\u003e\n\n**minibar** is a fast 2kB autocomplete search bar for [Typesense](https://typesense.org/). It is an alternative to Algolia DocSearch, InstantSearch, autocomplete-js, typesense-docsearch.js, and typesense-js.\n\n## Features\n\n* **Dependency-free**, vanilla JavaScript\n* **Small size**, 2kB transfer size\n* **Progressive enhancement**, works without JavaScript\n* **Responsive**, mobile-first layout\n* **Accessible**, keyboard navigation, arrow keys, close on `Esc` or outside click\n* **Fast**, leverages preconnect (Resource Hints), LRU memory cache\n* **Easy to install**, fully declarative via HTML (zero-code setup!)\n* **Web Component** ready\n* **CSP ready** compatible with strict [CSP security](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) settings\n\n## Getting started\n\n**[Demo](https://jquery.github.io/typesense-minibar/)**\n\n```html\n\u003ctypesense-minibar data-origin=\"\" data-collection=\"\" data-key=\"\"\u003e\n  \u003cform role=\"search\" action=\"https://duckduckgo.com\"\u003e\n    \u003cinput type=\"search\" name=\"q\" placeholder=\"Search...\" autocomplete=\"off\"\u003e\n    \u003cinput type=\"hidden\" name=\"sites\" value=\"example.org\"\u003e\n  \u003c/form\u003e\n\u003c/typesense-minibar\u003e\n```\n\n```html\n\u003clink rel=\"stylesheet\" href=\"typesense-minibar.css\"\u003e\n\u003cscript defer type=\"module\" src=\"typesense-minibar.js\"\u003e\u003c/script\u003e\n```\n\nDistribution:\n\n* **jsDelivr** ([browse](https://cdn.jsdelivr.net/npm/typesense-minibar@1.3.4/)):\u003cbr\u003e[typesense-minibar.js](https://cdn.jsdelivr.net/npm/typesense-minibar@1.3.4/typesense-minibar.js), [typesense-minibar.css](https://cdn.jsdelivr.net/npm/typesense-minibar@1.3.4/typesense-minibar.css)\n* **UNPKG** ([browse](https://unpkg.com/browse/typesense-minibar@1.3.4/)):\u003cbr\u003e[typesense-minibar.js](https://unpkg.com/typesense-minibar@1.3.4/typesense-minibar.js), [typesense-minibar.css](https://unpkg.com/typesense-minibar@1.3.4/typesense-minibar.css)\n* npm: [typesense-minibar](https://www.npmjs.com/package/typesense-minibar)\n  ```shell\n  npm i --save typesense-minibar\n  ```\n  ```js\n  // CommonJS\n  require('typesense-minibar');\n  // ESM\n  import 'typesense-minibar';\n  ```\n\n## API\n\n### Markup\n\nAs HTML custom element (aka Web Component):\n\n```html\n\u003ctypesense-minibar data-origin=\"\" data-collection=\"\" data-key=\"\"\u003e\n  \u003cform role=\"search\" action=\"https://duckduckgo.com\"\u003e\n    \u003cinput type=\"search\" name=\"q\" placeholder=\"Search...\" autocomplete=\"off\"\u003e\n    \u003cinput type=\"hidden\" name=\"sites\" value=\"example.org\"\u003e\n  \u003c/form\u003e\n\u003c/typesense-minibar\u003e\n```\n\n`\u003ctypesense-minibar\u003e\u003cform\u003e…\u003c/form\u003e\u003c/typesense-minibar\u003e` is equivalent to `\u003cform class=\"tsmb-form\"\u003e`,\nwhich you can also use directly:\n\n```html\n\u003cform role=\"search\" action=\"https://duckduckgo.com\" class=\"tsmb-form\"\n    data-origin=\"\"\n    data-collection=\"\"\n    data-key=\"\"\n\u003e\n  \u003cinput type=\"search\" name=\"q\" placeholder=\"Search...\" autocomplete=\"off\"\u003e\n  \u003cinput type=\"hidden\" name=\"sites\" value=\"example.org\"\u003e\n\u003c/form\u003e\n```\n\n### Configuration\n\nSet these attributes on `\u003ctypesense-minibar\u003e` or `\u003cform class=\"tsmb-form\"\u003e`:\n\n* ***data-origin*** (Required): Base URL to your Typesense server.\n\n  Include the `https://` or `http://` protocol, and (if non-default) the port number.\n\n  Example: `https://typesense.example.org`\n\n* ***data-collection*** (Required): Which collection to query.\n\n  Equal to the `\"index_name\"` in your `docsearch.config.json` file. If you index your websites\n  with something other than [docsearch-scraper](https://github.com/typesense/typesense-docsearch-scraper),\n  set this to the name of your Typesense collection ([Typesense API](https://typesense.org/docs/0.24.1/api/collections.html)).\n\n  Example: `example_mine`\n\n* ***data-key*** (Required): Search-only API key ([Typesense API](https://typesense.org/docs/0.24.1/api/api-keys.html#generate-scoped-search-key)).\n\n  Example: `write000less000do000more0`\n\n* [***data-slash***=true] (Optional): Focus the input field if the `/` slash key is pressed.\n\n  When enabled, a `keydown` event listener is added to `document`. Key presses in `\u003cinput\u003e` or `\u003ctextarea\u003e` elements are safely ignored. If multiple search forms are initiatilised on the same page, the first has precedence.\n\n  Set `data-slash=\"false\"` to disable this feature.\n\n* [***data-group***=false] (Optional): Group results under category headings.\n\n  By default, search results render in a flat list, with the `lvl0` field\n  as the page title, where `lvl0` typicaly selects h1, `lvl1` selects h2,\n  and so on.\n\n  To group results by category, configure [docsearch-scraper](https://github.com/typesense/typesense-docsearch-scraper)\n  with `lvl0` selecting the category (not the `h1`). And `lvl1` should then\n  instead select your `h1` page titles.\n\n  Set `data-group=\"true\"` to enable this feature.\n\n* [***data-foot***=false] (Optional): Include a \"Search by Typesense\" link in the footer.\n\n  Set `data-foot=\"true\"` to enable this feature. When enabled, a plaintext link is added,\n  styled using the Typesense brand color.\n\n  Include [typesense-minibar-foot.css](./typesense-minibar-foot.css) to render the official\n  Typesense wordmark instead.\n\n* [***data-search-params***=\"\"] (Optional): Modify search query parameters.\n\n  Each key-value pair will be added as a search query parameter, or will override the default value.\n  This property must be a valid URL parameters sequence, e.g. `\"key1=value1\u0026key2=value2\"`.\n\n  Refer to [typesense-minibar.js](./typesense-minibar.js) for the default search query parameters.\n  Refer to [Typesense documentation](https://typesense.org/docs/0.24.1/api/search.html#search-parameters)\n  for all the valid parameters.\n\n* [***data-no-results***=\"No results for '{}'.\"] (Optional): The message to display when no results are found.\n\n  The sequence of 2 curly brackets `{}` will be substituted with the queried text.\n\n### Styling and theming\n\nThe accompanying stylesheet exposes **CSS variables** that you can override to\ntweak styles, without writing custom CSS. Alternatively, you can target stable\nselectors based on the **semantic HTML**.\n\nRefer to [Style API](./API-Style.md) for the CSS variable names and selectors.\n\n## Compatibility\n\n| typesense-minibar | typesense-server | typesense-docsearch-scraper\n|--|--|--\n| 1.0.x | \u003e= 0.24 | \u003e= 0.6.0.rc1 \u003c!-- adds \"group_by=url_without_anchor\" --\u003e (Tested upto: 0.9.1)\n\n### Browser support\n\nThe below matrix describes support for the _enhanced_ JavaScript experience. The HTML experience falls back to submitting a form to DuckDuckGo, and works in all known browsers (including  IE 6 and Netscape Navigator).\n\n| Browser | Policy | Version\n|--|--|--\n| Firefox | Current and previous version,\u003cbr\u003eCurrent and previous ESR | Firefox 74+ (2020)\n| Chrome | Last three years | Chrome 80+ (2020)\n| Edge | Last three years | Edge 80+ (2020)\n| Opera | Last three years | Opera 67+ (2020)\n| Safari | Last three years | Safari 13.1 (2020)\n| iOS | Last three years | iOS 13.4 (2020)\n\n\u003csup\u003eNotable feature requirements: ES6 syntax, ES2020 Optional chaining, ES2022 Async functions, DOM NodeList-forEach.\u003c/sup\u003e\n\nPractical implications:\n\n| OS | Supported from | Running\n|--|--|--\n| Android | [Moto G4](https://en.wikipedia.org/wiki/Moto_G4) (2016) | Android 7.0 with Chrome 80+\n| Android | [Samsung Galaxy S7](https://en.wikipedia.org/wiki/Samsung_Galaxy_S7) (2016) | Android 7.0 - 8.0\n| Android | [Samsung Galaxy A5](https://en.wikipedia.org/wiki/Samsung_Galaxy_A5_(2016)) (2016) | Android 7.0\n| Android | [Google Pixel 1](https://en.wikipedia.org/wiki/Pixel_(1st_generation)) (2016) | Android 7.0\n| iOS | [iPhone 6S](https://en.wikipedia.org/wiki/IPhone_6S) (2015) | iOS 13.4 (2020) upto iOS 15 (2022)\n| Linux | Debian 9 Stretch (2018) | `firefox-esr` 91\n| Linux | Debian 10 Buster (2019) | `firefox-esr` 102, `chromium` 90)\n| Linux | Ubuntu 18.04 LTS (2018) | current `firefox`, current `chromium-browser`\n| macOS | OS X 10.9 Mavericks (2013-2016) | Firefox 78 ESR (2020)\u003cbr\u003e(Safari 7 default unsupported)\n| macOS | OS X 10.13 Mavericks (2017-2020) | Firefox 78 ESR (2020), Chrome 80+\u003cbr\u003e(Safari 11 default unsupported)\n| macOS | OS X 10.15 Catalina (2019-2022) | Safari 13.1, Firefox 78 ESR (2020), Chrome 80+\n| Windows | Windows 7 (2009) or later | current Edge, current Firefox\n\nNotes:\n* [Firefox release schedule](https://whattrainisitnow.com/calendar/)\n* [iOS 16 dropped support](https://en.wikipedia.org/wiki/IOS_16#Supported_devices)\n* [Google Chrome requires Android 7.0 and macOS 10.13](https://support.google.com/chrome/a/answer/7100626?hl=en)\n* [Firefox 48 last to support OS X 10.6-10.8](https://www.mozilla.org/en-US/firefox/48.0/releasenotes/)\n* [Firefox 78 last to support OS X 10.9-10.11](https://www.mozilla.org/en-US/firefox/78.0/releasenotes/)\n\n## FAQ: Troubleshooting\n\n* Why is the form not interactive if I insert it later?\n\n  If you create or insert the element dynamically with JavaScript, it is recommended to write the form as a web component instead, like so:\n  ```html\n  \u003ctypesense-minibar\u003e\n    \u003cform ..\u003e..\u003c/form\u003e\n  \u003c/typesense-minibar\u003e\n  ```\n\n  Web components automatically activate the relevant JavaScript, no matter when they are inserted on the page.\n\n  By default, typesense-minibar.js also makes sure that any `\u003cform class=\"tsmb-form\"\u003e` elements on the page are hydrated and activated. This should catch any static element on the page (i.e. before \"document ready\", or the DOMContentLoaded event). This works internally by levering the fact that script execution is naturally deferred until the document is ready, via the `defer` and `type=\"module\"` attributes on the `\u003cscript\u003e` tag.\n\n* How does this prevent JavaScript errors in older browsers? What about ES5?\n\n  If you load typesense-minibar.js standalone, make sure you have the `type=\"module\"` attribute on the `\u003cscript\u003e` tag. Scripts with this type are naturally ignored by older browsers. The element works fine **without JavaScript**, following the principles of [progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement). This technique is analogous to \"[cutting the mustard](https://responsivenews.tumblr.com/post/18948466399/cutting-the-mustard)\".\n\n## Feedback\n\nFor questions, bug reports, or feature requests, use the [Issue tracker](https://github.com/jquery/typesense-minibar/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjquery%2Ftypesense-minibar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjquery%2Ftypesense-minibar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjquery%2Ftypesense-minibar/lists"}