https://github.com/luka1199/leaflet.animatedsearchbox
:mag: A simple Leaflet plugin that provides a collapsible search box
https://github.com/luka1199/leaflet.animatedsearchbox
javascript leaflet leaflet-control leaflet-plugin leaflet-plugins leaflet-search search
Last synced: 9 months ago
JSON representation
:mag: A simple Leaflet plugin that provides a collapsible search box
- Host: GitHub
- URL: https://github.com/luka1199/leaflet.animatedsearchbox
- Owner: luka1199
- License: mit
- Created: 2020-03-26T23:50:36.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-03T20:54:52.000Z (about 2 years ago)
- Last Synced: 2025-08-20T04:46:26.840Z (10 months ago)
- Topics: javascript, leaflet, leaflet-control, leaflet-plugin, leaflet-plugins, leaflet-search, search
- Language: JavaScript
- Homepage:
- Size: 3.32 MB
- Stars: 16
- Watchers: 1
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Leaflet.AnimatedSearchBox
A simple Leaflet plugin that provides a collapsible search box.
### [Demos](https://luka1199.github.io/Leaflet.AnimatedSearchBox/examples/)
- [Basic Demo](https://luka1199.github.io/Leaflet.AnimatedSearchBox/examples/example1.html)
- [Fuse.js Demo](https://luka1199.github.io/Leaflet.AnimatedSearchBox/examples/example_fuse.html)
## Usage
- Include the [`Leaflet.AnimatedSearchBox.css`](https://github.com/luka1199/Leaflet.AnimatedSearchBox/releases/latest/download/Leaflet.AnimatedSearchBox.css
) file in the head section of your document:
```html
```
- Include the [`Leaflet.AnimatedSearchBox.js`](https://github.com/luka1199/Leaflet.AnimatedSearchBox/releases/latest/download/Leaflet.AnimatedSearchBox.js
) file in your document:
```html
```
- Add the [search icon](https://github.com/luka1199/Leaflet.AnimatedSearchBox/releases/latest/download/search_icon.png) image file to `img/search_icon.png`
- Create a new `L.Control.Searchbox` and add it to the map:
```javascript
var searchbox = L.control.searchbox({
position: 'topright',
expand: 'left'
}).addTo(map);
```
### Options
- `position`: Sets the position of the searchbox (Default: `'topright'`).
- `expand`: Sets the direction in which the search box expands. (Default: `'left'`).
- `collapsed`: Sets the initial state of the searchbox (Default: `false`).
- `id`: Sets the id of the container of the searchbox.
- `class`: Adds custom classes to the container of the searchbox.
- `width`: Sets the width of the input field of the searchbox. (Example: `'450px'`)
- `iconPath`: Sets the path for the search icon (Default: `'img/search_icon.png'`).
- `autocompleteFeatures`: Activates the given features (Default: `[]`).
Possible features:
- `'setValueOnClick'`: Set the value of the searchbox to the value of the clicked autocomplete list item.
- `'arrowKeyNavigation'`: Coming soon
- `'setValueOnHover'`: Coming soon
- `'setValueOnEnter'`: Coming soon
### Methods
```javascript
// Expand the searchbox
searchbox.show()
// Collapse the searchbox
searchbox.hide()
// Toogle the searchbox
searchbox.toggle()
// Returns true if searchbox is collapsed
searchbox.isCollapsed()
// Returns current value of the text field of the searchbox
searchbox.getValue()
// Sets the value of the text field of the search box
searchbox.setValue(value)
// Adds an item to the autocomplete list
searchbox.addItem(item)
// Adds items to the autocomplete list
searchbox.addItems(items)
// Sets items of the autocomplete list
searchbox.setItems(items)
// Clears the autocomplete list
searchbox.clearItems()
// Clears the text field of the search box
searchbox.clearInput()
// Clears the text field and the autocomplete list of the search box
searchbox.clear()
// Adds a listener function (handler) to a particular DOM event (event)
// of the input field of the searchbox
searchbox.onInput(event, handler);
// Removes a previously added listener function (handler) of a particular DOM event (event)
// from the input field of the searchbox
searchbox.offInput(event, handler);
// Adds a listener function (handler) to a particular DOM event (event)
// of the button of the searchbox
searchbox.onButton(event, handler);
// Removes a previously added listener function (handler) of a particular DOM event (event)
// from the button of the searchbox
searchbox.offButton(event, handler);
// Adds a listener function (handler) to a particular DOM event (event)
// of the autocomplete list
searchbox.onAutocomplete(event, handler);
// Removes a previously added listener function (handler) of a particular DOM event (event)
// from the autocomplete list
searchbox.offAutocomplete(event, handler);
```
## Planned features
- Add option to use `` for autocomplete.
- Support for npm etc.