{"id":13555637,"url":"https://github.com/bevacqua/horsey","last_synced_at":"2025-05-15T10:01:53.867Z","repository":{"id":28128915,"uuid":"31628062","full_name":"bevacqua/horsey","owner":"bevacqua","description":":horse: Progressive and customizable autocomplete component","archived":false,"fork":false,"pushed_at":"2024-03-16T02:20:41.000Z","size":816,"stargazers_count":1174,"open_issues_count":37,"forks_count":99,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-05-14T15:16:40.874Z","etag":null,"topics":["autocomplete","component","es6","front-end","javascript","vanilla"],"latest_commit_sha":null,"homepage":"https://bevacqua.github.io/horsey","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/bevacqua.png","metadata":{"files":{"readme":"readme.markdown","changelog":"changelog.markdown","contributing":null,"funding":null,"license":"license","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":"2015-03-03T23:53:37.000Z","updated_at":"2025-05-06T09:03:23.000Z","dependencies_parsed_at":"2024-06-18T18:31:47.412Z","dependency_job_id":null,"html_url":"https://github.com/bevacqua/horsey","commit_stats":{"total_commits":101,"total_committers":13,"mean_commits":7.769230769230769,"dds":"0.19801980198019797","last_synced_commit":"82b64e1dea214d1548ad10456ebdb916a011a28b"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bevacqua%2Fhorsey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bevacqua%2Fhorsey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bevacqua%2Fhorsey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bevacqua%2Fhorsey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bevacqua","download_url":"https://codeload.github.com/bevacqua/horsey/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319717,"owners_count":22051072,"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":["autocomplete","component","es6","front-end","javascript","vanilla"],"created_at":"2024-08-01T12:03:19.519Z","updated_at":"2025-05-15T10:01:52.688Z","avatar_url":"https://github.com/bevacqua.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Javascript","UI Components","es6"],"sub_categories":["Search"],"readme":"# Horsey\n\n\u003e Progressive and customizable autocomplete component\n\nBrowser support includes every sane browser and **IE7+**.\n\n# Demo!\n\nYou can see a [live demo here][3].\n\n[![screenshot.png][5]][3]\n\n# Inspiration\n\nI needed a fast, easy to use, and reliable autocomplete library. The ones I stumbled upon were too bloated, too opinionated, or provided an unfriendly human experience.\n\nThe goal is to produce a framework-agnostic autocomplete that is easily integrated into your favorite MVC framework, that doesn't translate into a significant addition to your codebase, and that's **enjoyable to work with**. Horsey shares the modular design philosophy of [Rome, the datetime picker][1]. Furthermore, it plays well with [Insignia, the tag editor][2] component, and pretty much any other well-delimited component out there.\n\n# Features\n\n- Small and focused\n- Natural keyboard navigation\n- Progressively enhanced\n- Extensive browser support\n- Fuzzy searching\n- Supports `\u003cinput\u003e` and `\u003ctextarea\u003e` elements\n\n# Install\n\nYou can get it on npm.\n\n```shell\nnpm install horsey --save\n```\n\nOr bower, too.\n\n```shell\nbower install horsey --save\n```\n\n# Options\n\nEntry point is `horsey(el, options)`. Configuration options are detailed below. This method [returns a small API](#api) into the `horsey` autocomplete list instance. You can also find existing horsey instances using `horsey.find`.\n\n## `predictNextSearch(info)`\n\nRuns when a tag is inserted. The returned string is used to pre-fill the text input. Useful to avoid repetitive user input. The suggestion list can be used to choose a prefix based on the previous list of suggestions.\n\n- `info.input` contains the user input at the time a suggestion was selected\n- `info.suggestions` contains the list of suggestions at the time a suggestion was selected\n- `info.selection` contains the suggestion selected by the user\n\n## `cache`\n\nCan be an object that will be used to store queries and suggestions. You can provide a `cache.duration` as well, which defaults to one day and is specified in seconds. The `cache.duration` is used to figure out whether cache entries are fresh or stale.\nYou can disable autocomplete caching by setting `cache` to `false`.\n\n## `limit`\n\nCan be a number that determines the maximum amount of suggestions shown in the autocomplete list.\n\n## `filter(query, suggestion)`\n\nBy default suggestions are filtered using the [`fuzzysearch`](https://github.com/bevacqua/fuzzysearch) algorithm. You can change that and use your own `filter` algorithm instead.\n\n## `source`\n\nA `source(data, done)` should be set to a function. The `done(err, items)` function should provide the `items` for the provided `data.input`.\n\n- `data.input` is a query for which suggestions should be provided\n- `data.limit` is the previously specified `options.limit`\n- `data.previousSelection` is the last suggestion selected by the user\n- `data.previousSuggestions` is the last list of suggestions provided to the user\n\nThe expected schema for the `items` object result is outlined below.\n\n```js\n[category1, category2, category3]\n```\n\nEach category is expected to follow the next schema. The `id` is optional, all category objects without an `id` will be treated as if their `id` was `'default'`. Note that categories under the same `id` will be merged together when displaying the autocomplete suggestions.\n\n```js\n{\n  id: 'here is some category',\n  list: [item1, item2, item3]\n}\n```\n\n## `blankSearch`\n\nWhen this option is set to `true`, the `source(data, done)` function will be called even when the `input` string is empty.\n\n## `noMatches`\n\nDefaults to `null`. Set to a string if you want to display an informational message when no suggestions match the provided `input` string. Note that this message won't be displayed when `input` is empty even if `blankSearch` is turned on.\n\n## `debounce`\n\nThe minimum amount of milliseconds that should ellapse between two different calls to `source`. Useful to allow users to type text without firing dozens of queries. Defaults to `300`.\n\n## `highlighter`\n\nIf set to `false`, autocomplete suggestions won't be highlighted based on user input.\n\n## `highlightCompleteWords`\n\nIf set to `false`, autocomplete suggestions won't be highlighted as whole words first. The highlighter will be faster but the UX won't be as close to user expectations.\n\n## `renderItem`\n\nBy default, items are rendered using the text for a `suggestion`. You can customize this behavior by setting `autocomplete.renderItem` to a function that receives `li, suggestion` parameters. The `li` is a DOM element and the `suggestion` is its data object.\n\n## `renderCategory`\n\nBy default, categories are rendered using just their `data.title`. You can customize this behavior by setting `autocomplete.renderCategory` to a function that receives `div, data` parameters. The `div` is a DOM element and the `data` is the full category data object, including the `list` of suggestions. After you customize the `div`, the list of suggestions for the category will be appended to `div`.\n\n# API\n\nOnce you've instantiated a `horsey`, you can do a few more things with it.\n\n## `.clear()`\n\nYou can however, remove every single suggestion from the autocomplete, wiping the slate clean. Contrary to `.destroy()`, `.clear()` won't leave the `horsey` instance useless, and calling `.add` will turn it back online in no time.\n\n## `.source`\n\nExposes the suggestions that have been added so far to the autocomplete list. Includes suggestions that may not be shown due to filtering. This should be treated as a read-only list.\n\n## `.show()`\n\nShows the autocomplete list.\n\n## `.hide()`\n\nHides the autocomplete list.\n\n## `.toggle()`\n\nShows or hides the autocomplete list.\n\n## `.refreshPosition()`\n\nUpdates the position of the autocomplete list relative to the position of the `el`. Only necessary when the `el` is moved.\n\n## `.destroy()`\n\nUnbind horsey-related events from the `el`, remove the autocomplete list. It's like `horsey` was never here.\n\n## `.retarget(target)`\n\nDetaches this `horsey` instance from `el`, removing events and whatnot, and then attaches the instance to `target`. Note that `horsey.find` will still only work with `el`. This method is mostly for internal purposes, but it's also useful if you're developing a text editor with multiple modes (particularly if it switches between a `\u003ctextarea\u003e` and a content-editable `\u003cdiv\u003e`).\n\n## `.anchor`\n\nThe anchor value that was originally passed into `horse` as `options.anchor`.\n\n## `.defaultRenderer`\n\nThe default `render` method\n\n## `.defaultGetText`\n\nThe default `getText` method\n\n## `.defaultGetValue`\n\nThe default `getValue` method\n\n## `.defaultSetter`\n\nThe default `set` method\n\n## `.defaultFilter`\n\nThe default `filter` method\n\n## `.appendText`\n\nMethod called whenever we have an `anchor` and we need to append a suggestion to an input field. Defaults to `defaultAppendText`.\n\n## `.appendHTML`\n\nMethod called whenever we have an `anchor` and we need to append a suggestion for a `contentEditable` element. **Unsupported by default**. Provided by [banksy][8].\n\n## `.defaultAppendText`\n\nDefault `appendText` implementation\n\n## `.filterAnchoredText`\n\nMethod called whenever we have an `anchor` and we need to filter a suggestion for an input field.\n\n## `.filterAnchoredHTML`\n\nMethod called whenever we have an `anchor` and we need to filter a suggestion for a `contentEditable` element. **Unsupported by default**. Provided by [banksy][8].\n\n# Events\n\nOnce you've instantiated a `horsey`, some propietary synthetic events will be emitted on the provided `el`.\n\nName              | Description\n------------------|---------------------------------------------------------------\n`horsey-show`     | Fired whenever the autocomplete list is displayed\n`horsey-hide`     | Fired whenever the autocomplete list is hidden\n`horsey-filter`   | Fired whenever the autocomplete list is about to be filtered. Useful to prime the filter method\n\n## Usage with [woofmark][7]\n\nSee [banksy][8] to integrate `horsey` into [woofmark][7].\n\n# License\n\nMIT\n\n[1]: https://github.com/bevacqua/rome\n[2]: https://github.com/bevacqua/insignia\n[3]: http://bevacqua.github.io/horsey\n[4]: https://github.com/bevacqua/fuzzysearch\n[5]: http://i.imgur.com/imDFC0C.png\n[6]: https://github.com/bevacqua/woofmark#editor\n[7]: https://github.com/bevacqua/woofmark\n[8]: https://github.com/bevacqua/banksy\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbevacqua%2Fhorsey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbevacqua%2Fhorsey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbevacqua%2Fhorsey/lists"}