Activating Search Plugin with JS Leaflet

Question

I am attempting to add the following plugin to search a GeoJSON file I have open in Leaflet Javascript: http://labs.easyblog.it/maps/leaflet-search/examples/geojson-layer.html

I have brought in the search js and css files and called them, I just do not understand the syntax to incorporate it into the existing script.

Here is the script it needs to be able to search (the field is Sheet_Numb):

$.getJSON("Syriashape.json",function(data){
    // add GeoJSON layer and popups to the map once the file is loaded
    L.geoJson(data, {
   style: function (feature) {
       return {};
   },
   onEachFeature: function (feature, layer) {
       layer.bindPopup(feature.properties.Sheet_Numb + "</br>" + "  " + feature.properties.LOC_Catalo);
   }
}).addTo(map);
  });

I know I have to add the following somewhere:

map.addLayer(featuresLayer);
var searchControl = new L.Control.Search({layer: featuresLayer, propertyName: 'name', circleLocation:false});

searchControl.on('search_locationfound', function(e) {

    e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
    if(e.layer._popup)
        e.layer.openPopup();

}).on('search_collapsed', function(e) {

    featuresLayer.eachLayer(function(layer) {   //restore feature color
        featuresLayer.resetStyle(layer);
    }); 
});

map.addControl( searchControl );  //inizialize search control

Answer 1

You need to assign your L.geoJson layer to a named var outside the getJSON function in order to access it via controls. First, create it without any data, along with whatever options you want to apply to the features:

//create empty geoJson layer to be populated later
//styles, popups and other layer options can be specified here
var syriaLayer = L.geoJson(false, {
    style: function (feature) {
        return {};
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup("Sheet Number: " + feature.properties.Sheet_Numb + "</br>" 
                      + "Catalog Record: " + "<a href = '" + feature.properties.LOC_Catalo + "'>" + feature.properties.LOC_Catalo + "</a>");
    }
});

Then you can use addData to populate it with the data from your file:

$.getJSON("Syriashape.json", function (data) {
    // add GeoJSON data to layer and add to the map once the file is loaded
    syriaLayer.addData(data).addTo(map);
});

Then, because you have defined syriaLayer, you can refer to it (and Sheet_Numb) when you create your search control:

var searchControl = new L.Control.Search({layer: syriaLayer, propertyName: 'Sheet_Numb', circleLocation:false});

Here is a working fiddle that searches by state using the data from the example you linked to:

http://fiddle.jshell.net/nathansnider/ma33L8hx/