Как создать пользовательский поиск на боковой панели для листовок, которые выполняют поиск по данным Geo json?

Question

У меня есть проект с использованием листовки, но я хочу выполнить пользовательский поиск по данным Geo JSON, но я не знаю, как это сделать. У меня есть боковая панель с окном поиска и кнопкой. ниже мой дизайн: .

<div
  id="leaflet_search"
  class="leaflet-control-search leaflet-control search-exp"
>
  <input
    class="search-input"
    type="text"
    autocapitalize="off"
    placeholder="Search..."
    id="searchtext10"
    style="display: block; max-width: 634px;"
  />
  <ul class="search-tooltip" style="display: none;"></ul>
  <a class="search-cancel" href="#" title="Cancel" style="display: none;">
    <span>⊗</span>
  </a>
  <a class="search-button" id="search" href="#" title="Search..." style=""></a>
  <div class="search-alert" style="display: none;"></div>
</div>

---

var map = new L.map("myMAP_id", {
  fullscreenControl: {
    pseudoFullscreen: false,
    position: "topright"
  }
}).setView([10.392241, 124.98], 16.5);
var layer = new L.tileLayer(
  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
  {
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    visible: false,
    title: "OpenStreetMap"
  }
);

map.addLayer(layer);

var poly = L.geoJson(slsu_bldg, {
  style: function(feature) {
    return bldg_style;
  },
  onEachFeature: function(feature, marker) {
    marker.bindPopup(
      "<div><b>SOUTHERN LEYTE STATE UNIVERSITY" +
        "<br>" +
        feature.properties.BLDG_NAME +
        "<br><button id='" +
        feature.properties.ID +
        "' class='btn btn-xs btn-primary' style='height: 23px; font-size: 11px; padding: 3px 6px; letter-spacing: 0.02rem; margin-top: 5px;'>More Details <i class='fa fa-caret-right'></i></button></div"
    );
  }
});

var search_val;
$("#search").on("click", function() {
  search_val = $("#searchtext10").val();

  console.log(search_val);
  var search = new L.Control.Search({
    options: {
      layer: poly,
      zoom: 19,
      initial: false,
      filterData: search_val,
      propertyName: "BLDG_NAME",
      marker: {
        icon: true,
        animate: true,
        circle: {
          radius: 10,
          weight: 4,
          color: "#1BC500",
          stroke: true,
          fill: true
        }
      }
    }
  });

  console.log(search);
});

---