{"id":25522279,"url":"https://github.com/launchscout/autocomplete_input","last_synced_at":"2025-04-11T01:32:22.331Z","repository":{"id":275206592,"uuid":"924867958","full_name":"launchscout/autocomplete_input","owner":"launchscout","description":"An autocomplete input component for Phoenix LiveView","archived":false,"fork":false,"pushed_at":"2025-02-03T19:29:54.000Z","size":62,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-21T10:19:51.023Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/launchscout.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-01-30T19:40:45.000Z","updated_at":"2025-02-09T12:10:22.000Z","dependencies_parsed_at":"2025-02-01T00:28:47.907Z","dependency_job_id":null,"html_url":"https://github.com/launchscout/autocomplete_input","commit_stats":null,"previous_names":["superchris/autocomplete_input","launchscout/autocomplete_input"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/launchscout%2Fautocomplete_input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/launchscout%2Fautocomplete_input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/launchscout%2Fautocomplete_input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/launchscout%2Fautocomplete_input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/launchscout","download_url":"https://codeload.github.com/launchscout/autocomplete_input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248325093,"owners_count":21084866,"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":[],"created_at":"2025-02-19T18:19:13.717Z","updated_at":"2025-04-11T01:32:22.316Z","avatar_url":"https://github.com/launchscout.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AutocompleteInput\n\nThis is an autocomplete component for Phoenix LiveView. It uses a form associated custom element, which means it appears in your form params just like any other input element in your form. It is designed to be simple to integrate with live view and fully stylable via css.\n\n## Installation\n\nThe [hex package](https://hex.pm/packages/autocomplete_input) can be installed\nby adding `autocomplete_input` to your list of dependencies in `mix.exs`:\n\n```elixir\ndef deps do\n  [\n    {:autocomplete_input, \"~\u003e 0.1.0\"}\n  ]\nend\n```\n\nTo install the `autocomplete-input` element javascript: \n```\nnpm install --prefix assets phoenix-custom-event-hook @launchscout/autocomplete-input\n```\n\nAdd following to app.js\n\n```js\nimport '@launchscout/autocomplete-input'\nimport PhoenixCustomEventHook from 'phoenix-custom-event-hook'\n\nlet csrfToken = document.querySelector(\"meta[name='csrf-token']\").getAttribute(\"content\")\nlet liveSocket = new LiveSocket(\"/live\", Socket, {\n  longPollFallbackMs: 2500,\n  params: {_csrf_token: csrfToken},\n  hooks: { PhoenixCustomEventHook }\n})\n```\n## Usage\n\nThe `AutocompleteInput.autocomplete_input` is a standard functional component that accepts the following attributes:\n\n* `id` - (Required) The unique identifier for the input element\n* `name` - (Required) The form field name that will be used in params\n* `options` - (Required) A list of options in the same form as `options_for_select`, eg `{label, value}`\n* `value` - (Optional) The initially selected value\n* `display_value` - (Optional) Text shown when the element renders in the intial closed state. An edit icon will be displayed next to it\n* `min_length` - (Optional, default: 1) Minimum number of characters required before showing suggestions\n\n## Events\n\nThe component sends two custom events that you can handle in your LiveView:\n\n* `autocomplete-search` - Triggered when the user types in the input field. The event payload contains:\n  * `name` - The name of the field\n  * `query` - The current search text entered by the user\n\n* `autocomplete-commit` - Triggered when an option is selected. It is normally expected you would clear the list of options here. The event payload will contain the following:\n  * `name` The name of the field\n  * `value` The selected value\n\n* `autocomplete-open` - Triggered when an autocomplete is opened. The event payload will contain\n  * `name` The name of the field\n\n* `autocomplete-close` - Triggered when an autocomplete is cloase. It is normally expected that you will clear the list of options here. The event payload will contain\n  * `name` The name of the field\n\n## Example\n\nThe component can be used within a form as follows:\n\n```html\n\u003ch1\u003eAutocompleted Form\u003c/h1\u003e\n\nSelected fruit: \u003cdiv id=\"selected-fruit\"\u003e\u003c%= @results[:fruit] %\u003e\u003c/div\u003e\nSelected animal: \u003cdiv id=\"selected-animal\"\u003e\u003c%= @results[:animal] %\u003e\u003c/div\u003e\n\n\u003c.simple_form for={%{}} phx-submit=\"submit\" phx-change=\"change\"\u003e\n  \u003cdiv\u003e\n    \u003clabel for=\"autocomplete-input\"\u003eFruit\u003c/label\u003e\n    \u003c.autocomplete_input id=\"autocomplete-input\" options={@fruit_options} value=\"apple\" name=\"fruit\" display_value=\"Choose a fruit\" min_length={3} /\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003clabel for=\"autocomplete-input\"\u003eAnimal\u003c/label\u003e\n    \u003c.autocomplete_input id=\"autocomplete-input\" options={@animal_options} value=\"dog\" name=\"animal\" display_value=\"Choose an animal\" min_length={3} /\u003e\n  \u003c/div\u003e\n  \u003c.button type=\"submit\"\u003eSubmit\u003c/.button\u003e\n\u003c/.simple_form\u003e\n```\n\nThe corresponding LiveView:\n\n```elixir\ndefmodule AutocompleteTestbedWeb.AutocompletedForm do\n  use AutocompleteTestbedWeb, :live_view\n\n  @fruit_options [{\"Apple\", \"apple\"}, {\"Banana\", \"banana\"}, {\"Cherry\", \"cherry\"}, {\"Nanna\", \"nanna\"}]\n  @animal_options [{\"Dog\", \"dog\"}, {\"Cat\", \"cat\"}, {\"Bird\", \"bird\"}, {\"Bearcat\", \"bearcat\"}]\n\n  import AutocompleteInput\n\n  def mount(params, session, socket) do\n    {:ok, socket |\u003e assign(fruit_options: [], animal_options: [], results: %{})}\n  end\n\n  def handle_event(\"autocomplete-search\", %{\"name\" =\u003e \"fruit\", \"query\" =\u003e value}, socket) do\n    {:noreply, socket |\u003e assign(fruit_options: @fruit_options |\u003e Enum.filter(\u0026label_matches?(value, \u00261)))}\n  end\n\n  def handle_event(\"autocomplete-search\", %{\"name\" =\u003e \"animal\", \"query\" =\u003e value}, socket) do\n    {:noreply, socket |\u003e assign(animal_options: @animal_options |\u003e Enum.filter(\u0026label_matches?(value, \u00261)))}\n  end\n\n  def handle_event(\"autocomplete-commit\", _params, socket) do\n    {:noreply, socket |\u003e assign(options: [])}\n  end\n\n  def handle_event(\"change\", %{\"autocomplete-input\" =\u003e value}, socket) do\n    IO.inspect(value, label: \"change\")\n    {:noreply, socket |\u003e assign(selected_value: value)}\n  end\n\n  def handle_event(\"submit\", %{\"fruit\" =\u003e fruit, \"animal\" =\u003e animal}, socket) do\n    {:noreply, socket |\u003e assign(results: %{fruit: fruit, animal: animal})}\n  end\n\n  defp label_matches?(query, {label, _}) do\n    String.contains?(String.downcase(label), String.downcase(query))\n  end\nend\n```\n\nThis example is contained in the `autocomplete_testbed` folder and is used by the wallaby test.\n\nHere's what it looks like in action:\n\n[![Autcomplete Demo](https://cdn.loom.com/sessions/thumbnails/1cf163f4fe544dbbae19c1660d19b9a6-a9bcaebe5225e9a9-full-play.gif)](https://www.loom.com/share/1cf163f4fe544dbbae19c1660d19b9a6?sid=c2d44f17-a0f9-4b5c-9771-da9b45b53edd)\n\n## `autocomplete-input`\n\nFor more details on the custom element this component wraps including styling information, see the [autocomplete-input repo](https://github.com/launchscout/autocomplete-input).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaunchscout%2Fautocomplete_input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaunchscout%2Fautocomplete_input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaunchscout%2Fautocomplete_input/lists"}