3

I am using https://github.com/stefanocudini/leaflet-search to search through some geojson. It works well but I am trying to return the text the user enters into the search to build a dynamic query. How do I capture the text without disabling the autocomplete?

states_layer= new L.geoJson(states).addTo(map);
var controlSearch = new L.Control.Search({
    position:'topright',        
    layer: states_layer,
    propertyName: 'name',
    initial: false,
    zoom: 11,
    marker: false,
}); 
map.addControl(controlSearch);

Code works good -- I was looking through the source code and tried to implement the filterData option.

filterData: function(text,records){
        console.log(text);
        console.log(records);
        }

This printed out the entered text and records but it took away the important autocomplete functionality from the layer search.

Update

enter image description here

Update 2 using filter data return records

filterData: function(text, records) {
  console.log(text);
  console.log(records);
  return(records);
}

breaks the autocomplete

enter image description here

Update 3

added

    filterData: function(text, records) {
      records = this._defaultFilterData(text, records);
      console.log(Object.keys(records));        
      console.log(records);
      return(records);
    }

enter image description here

which helps but this is not what I am looking for. I need when the user selects 1 record or types in the name fully and presses enter or the search icon -- I need that text or 1 record chosen.

I am trying to avoid writing a custom autocomplete search bar, anything in the source code worth tinkering?

1

1 Answer 1

2

Your idea and logic is perfectly OK, you just forgot that filtering function must return whatever it filters. Since you actually do no filtering yourself, default filter function has to be called:

filterData: function(text, records) {
  console.log(text);
  console.log(records);
  records = this._defaultFilterData(text, records);
  return(records);
}

To catch the final searched text, you can use moveToLocation option function:

moveToLocation: function(latlng, title, map) {
  console.log(title);
  this._defaultMoveToLocation(latlng, title, map);
}

If you don't want to do the actual move, just leave default action out.

5
  • added your suggestion but it breaks the autocomplete see update pic. If I change it to return text the autocomplete suggests numbers instead of the layer data
    – ziggy
    Jan 22, 2021 at 13:39
  • You are right, I was careless when testing proposed solution. See modified answer.
    – TomazicM
    Jan 22, 2021 at 13:55
  • The autocomplete works with your fix but it still just returns the records, really need the user entered text, or the 1 selected record after the user presses enter or the search button
    – ziggy
    Jan 22, 2021 at 14:57
  • See modified answer.
    – TomazicM
    Jan 22, 2021 at 16:03
  • great that worked! you're a life saver thank you
    – ziggy
    Jan 22, 2021 at 16:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.