CODEWITHSUNDEEP
javascriptjquerysearchleaflet
MrFox
MrFox

Reputation: 5126

Why does the Leaflet search box dissappear so easily? And how to keep it around?

I've implemented the Leaflet search-box extension.
Whenever I use the mouse to pan around on the map, the search box dissappears immediately and the user has to re-type the entire query every time.
I'd like the search-box and it's query to hang around until the user presses the clear button.
A display:block; is added and removed in order to show/hide the search-box. I'd like to only allow the collapse to happen when the user clears the query, instead of on any mouse movement.

Alternatively I've tried to keep the query around so the user doesn't have to re-type it every time. By catching the collapse event and storing the query. But at that point the box has already been cleaned up and there's no text to remember. 

var timeout = {};
var oldQuery = "";
controlSearch.on('search:expanded', function () {
    var searchBox = this._input;
    searchBox.value = oldQuery;
    this._input.onkeyup = function () {
        clearInterval(timeout);
        timeout = setTimeout(function () {
            var query = searchBox.value;
            search(query, searchItems, searchResultsLayer);
            if (query.length > 0) {
                if (!searchResultsShown) {
                    searchResultsLayer.addTo(map);
                }
            }
            else {
                if (searchResultsShown) {
                    searchResultsLayer.removeFrom(map);
                }
            }
        }, 200);
    };
}).on('search:collapsed', function () {
    oldQuery = this._input.value;
});

Upvotes: 0

Views: 393

Answers (1)

Baptiste
Baptiste

Reputation: 1785

To keep the user input you have to remove :

this.cancel();

From :

collapse: function() {

}

To keep the search box from collapse you can add the option collapsed to false like this example :

map.addControl( new L.Control.Search({
    container: 'findbox',
    layer: markersLayer,
    initial: false,
    collapsed: false
}) );

Then when you click on clear you should fire the collapse function and everything should work fine.

Upvotes: 1

Related Questions