{"id":18834772,"url":"https://github.com/luka1199/leaflet.animatedsearchbox","last_synced_at":"2025-09-12T23:32:21.112Z","repository":{"id":101663070,"uuid":"250398181","full_name":"luka1199/Leaflet.AnimatedSearchBox","owner":"luka1199","description":":mag: A simple Leaflet plugin that provides a collapsible search box","archived":false,"fork":false,"pushed_at":"2024-05-03T20:54:52.000Z","size":3485,"stargazers_count":16,"open_issues_count":2,"forks_count":9,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-20T04:46:26.840Z","etag":null,"topics":["javascript","leaflet","leaflet-control","leaflet-plugin","leaflet-plugins","leaflet-search","search"],"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/luka1199.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"zenodo":null}},"created_at":"2020-03-26T23:50:36.000Z","updated_at":"2025-01-16T03:05:29.000Z","dependencies_parsed_at":"2025-04-15T11:33:41.572Z","dependency_job_id":null,"html_url":"https://github.com/luka1199/Leaflet.AnimatedSearchBox","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/luka1199/Leaflet.AnimatedSearchBox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luka1199%2FLeaflet.AnimatedSearchBox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luka1199%2FLeaflet.AnimatedSearchBox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luka1199%2FLeaflet.AnimatedSearchBox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luka1199%2FLeaflet.AnimatedSearchBox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luka1199","download_url":"https://codeload.github.com/luka1199/Leaflet.AnimatedSearchBox/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luka1199%2FLeaflet.AnimatedSearchBox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274893250,"owners_count":25369278,"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","status":"online","status_checked_at":"2025-09-12T02:00:09.324Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["javascript","leaflet","leaflet-control","leaflet-plugin","leaflet-plugins","leaflet-search","search"],"created_at":"2024-11-08T02:13:46.925Z","updated_at":"2025-09-12T23:32:21.073Z","avatar_url":"https://github.com/luka1199.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Leaflet.AnimatedSearchBox\n\nA simple Leaflet plugin that provides a collapsible search box.\n\n![demo](assets/new_demo_cropped.gif)\n\n### [Demos](https://luka1199.github.io/Leaflet.AnimatedSearchBox/examples/)\n\n- [Basic Demo](https://luka1199.github.io/Leaflet.AnimatedSearchBox/examples/example1.html)\n- [Fuse.js Demo](https://luka1199.github.io/Leaflet.AnimatedSearchBox/examples/example_fuse.html)\n\n## Usage\n\n- Include the [`Leaflet.AnimatedSearchBox.css`](https://github.com/luka1199/Leaflet.AnimatedSearchBox/releases/latest/download/Leaflet.AnimatedSearchBox.css\n) file in the head section of your document:\n\n```html\n\u003clink href=\"src/AnimatedSearchBox.css\" rel=\"stylesheet\"\u003e\n```\n\n- Include the [`Leaflet.AnimatedSearchBox.js`](https://github.com/luka1199/Leaflet.AnimatedSearchBox/releases/latest/download/Leaflet.AnimatedSearchBox.js\n) file in your document:\n\n```html\n\u003cscript src=\"src/AnimatedSearchBox.js\"\u003e\u003c/script\u003e\n```\n\n- Add the [search icon](https://github.com/luka1199/Leaflet.AnimatedSearchBox/releases/latest/download/search_icon.png) image file to `img/search_icon.png`\n\n- Create a new `L.Control.Searchbox` and add it to the map:\n\n```javascript\nvar searchbox = L.control.searchbox({\n    position: 'topright',\n    expand: 'left'\n}).addTo(map);\n```\n\n### Options\n\n- `position`: Sets the position of the searchbox (Default: `'topright'`).  \n- `expand`: Sets the direction in which the search box expands. (Default: `'left'`).  \n- `collapsed`: Sets the initial state of the searchbox (Default: `false`).  \n- `id`: Sets the id of the container of the searchbox.  \n- `class`: Adds custom classes to the container of the searchbox.  \n- `width`: Sets the width of the input field of the searchbox. (Example: `'450px'`)  \n- `iconPath`: Sets the path for the search icon (Default: `'img/search_icon.png'`).\n- `autocompleteFeatures`: Activates the given features (Default: `[]`).  \nPossible features:\n  - `'setValueOnClick'`: Set the value of the searchbox to the value of the clicked autocomplete list item.\n  - `'arrowKeyNavigation'`: Coming soon\n  - `'setValueOnHover'`: Coming soon\n  - `'setValueOnEnter'`: Coming soon\n\n### Methods\n\n```javascript\n// Expand the searchbox\nsearchbox.show()\n\n// Collapse the searchbox\nsearchbox.hide()\n\n// Toogle the searchbox\nsearchbox.toggle()\n\n// Returns true if searchbox is collapsed\nsearchbox.isCollapsed()\n\n// Returns current value of the text field of the searchbox\nsearchbox.getValue()\n\n// Sets the value of the text field of the search box\nsearchbox.setValue(value)\n\n// Adds an item to the autocomplete list\nsearchbox.addItem(item)\n\n// Adds items to the autocomplete list\nsearchbox.addItems(items)\n\n// Sets items of the autocomplete list\nsearchbox.setItems(items)\n\n// Clears the autocomplete list\nsearchbox.clearItems()\n\n// Clears the text field of the search box\nsearchbox.clearInput()\n\n// Clears the text field and the autocomplete list of the search box\nsearchbox.clear()\n\n// Adds a listener function (handler) to a particular DOM event (event)\n// of the input field of the searchbox\nsearchbox.onInput(event, handler);\n\n// Removes a previously added listener function (handler) of a particular DOM event (event)\n// from the input field of the searchbox\nsearchbox.offInput(event, handler);\n\n// Adds a listener function (handler) to a particular DOM event (event)\n// of the button of the searchbox\nsearchbox.onButton(event, handler);\n\n// Removes a previously added listener function (handler) of a particular DOM event (event)\n// from the button of the searchbox\nsearchbox.offButton(event, handler);\n\n// Adds a listener function (handler) to a particular DOM event (event)\n// of the autocomplete list\nsearchbox.onAutocomplete(event, handler);\n\n// Removes a previously added listener function (handler) of a particular DOM event (event)\n// from the autocomplete list\nsearchbox.offAutocomplete(event, handler);\n\n```\n\n## Planned features\n\n- Add option to use `\u003cdatalist\u003e` for autocomplete.\n- Support for npm etc.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluka1199%2Fleaflet.animatedsearchbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluka1199%2Fleaflet.animatedsearchbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluka1199%2Fleaflet.animatedsearchbox/lists"}