1

I'm trying to add a search box to my leaflet map viewer:

var controlSearch = new L.Control.Search({
    layer: new L.LayerGroup()
}).on('search_expanded', function () {
    console.log('search_expanded!')
}).on('popupopen', function(e) {
    var marker = e.popup._source.feature.properties.markerid;
}).addTo(map);

I need to add custom code to execute the search function on events, on which I've put break points. However the code isn't reaching my events when I press the search button or type text.
I'm using the map to show area's of land. The search has to identify area's based on their custom properties and highlight them or something else to identify them to the user. So the search should not apply to location or anything like that, but custom properties of the items that are being shown. The page mostly works with jQuery, no Angular.

I haven't been able to find a list of events.
So how do I catch the event where the user types?

MrFox
  • 4,852
  • 7
  • 45
  • 81
  • 1
    The search expande event you put is wrong. put it like on('search:expande') then it will work – Abid Nawaz Nov 21 '17 at 15:26
  • @AbidNawaz thanks, it's search:expanded for me. Is there an event for when the user types? Or will I have to add that to the textbox that's created at that moment? – MrFox Nov 21 '17 at 15:40
  • 1
    according to the Leaflet Control Search documentation there is no such event for user types you can add it to the textbox. – Abid Nawaz Nov 21 '17 at 15:45
  • please check the answer i have posted below. – Abid Nawaz Nov 21 '17 at 16:03

1 Answers1

2

You can add event like this to search input box:

var controlSearch = new L.Control.Search({
   layer: new L.LayerGroup()
}).on('search:expanded', function () {
   this._input.onkeyup = function(){
     console.log(this.value)
   }

}).addTo(map);
Abid Nawaz
  • 866
  • 6
  • 20