leaflet-fusesearch

Search features in a GeoJSON layer using the lightweight JavaScript fuzzy search Fuse.js

Usage

First download Fuse.js from this repo or from Kiro's site, and load it in your page before leaflet-fusesearch.js.

Create the control L.Control.FuseSearch and add it to the Map.

var searchCtrl = L.control.fuseSearch()
searchCtrl.addTo(map);

Then load your GeoJSON layer and index the features, choosing the properties you want to index (note you can pass either the FeatureCollection itself or its .features), e.g.

searchCtrl.indexFeatures(jsonData, ['name', 'company', 'details']);

Finally you need to bind each layer (marker) to the feature it is associated with, so that selecting an item in the result list opens up the matching popup. For instance :

L.geoJson(data, {
    onEachFeature: function (feature, layer) {
        feature.layer = layer;
    }
});

This is it ! By default the search control will appear on the top right corner of the map. This opens the search pane on the same side where you can type in the search string. The matching features are listed, with the indexed properties displayed. Clicking a feature on the list opens up the matching pop-up on the map, provided one is associated with it.

Options

The FuseSearch control can be created with the following options :

• position : position of the control, the search pane shows on the matching side. Default 'topright'.
• title : used for the control tooltip, default 'Search'
• panelTitle : title string to add on the top of the search panel, none by default
• placeholder : used for the input placeholder, default 'Search'
• maxResultLength : number of features displayed in the result list, default is null and all features found by Fuse are displayed
• showInvisibleFeatures : display the matching features even if their layer is invisible, default true
• showResultFct : function to display a feature returned by the search, parameters are the feature and an HTML container. Here is an example :

    showResultFct: function(feature, container) {
        props = feature.properties;
        var name = L.DomUtil.create('b', null, container);
        name.innerHTML = props.name;
        container.appendChild(L.DomUtil.create('br', null, container));
        container.appendChild(document.createTextNode(props.details));
    }

In addition these options are directly passed to Fuse - more details on Fuse.js :

• caseSensitive : whether comparisons should be case sensitive, default is false
• threshold : a decimal value indicating at which point the match algorithm gives up. A threshold of 0.0 requires a perfect match, a threshold of 1.0 would match anything, default 0.5

Other functions

The function refresh() can be used to search again the indexed features. This is useful for instance when some features have been filtered out, and saves you from reindexing the features.

Example

I should really provide a simpler example, however for now have a look at my demo site.