'For an interactive leaflet map, is there a way to make a search bar that filters data?

I'm working an interactive Leaflet map that has museum specimen location data. I want the user to be able to search for a specific specimen and have the map update based on the search. Data is somewhat as the following:

Genus, Species, Lat, Long,

  1. Canis, Canis latrans, ., .
  2. Canis, Canis lupus, . , .
  3. Canis, Canis lupus, ., .
  4. Puma, Puma concolor, ., .

So I would want the user to be able to search either the genus or the entire species, and have the search bar autocomplete the search. If the user types in Canis I want the map to filter to only show specimens from the Canis genus. If the user wants to continue typing and search Canis lupus I want only Canis lupus specimens to be on the map.

I've looked at leaflet's map and their search plugin only seems to handle one search result at once. I was thinking it would be useful to somehow combine their search and filter plugin but I'm not sure if this is the best way to do this or if there are better examples out there. Here are the links to the search and filter plugin respectively:

Search: https://github.com/stefanocudini/leaflet-search

Filter:https://github.com/maydemirx/leaflet-tag-filter-button

Would appreciate any code snippets or links to questions that are useful. Thank you!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source