Search wms layer in Openlayers based on attributes, zoom on it if found

Question

I'm using Openlayers 2.14 and use WMS fron GeoServer, I was able to extract the info from the layer when it is clicked through getfeatureinfo events and using new OpenLayers.Control.WMSGetFeatureInfo . Somewhat like this:

function activateControls(layerName) {
     //get wms feature info start
     infoControls ={
         click: new OpenLayers.Control.WMSGetFeatureInfo({
             url: geoserver_url,
             title: 'Identify features by clicking',
             layers: [layerName],
             queryVisible: true,
             infoFormat:'application/vnd.ogc.gml',
             eventListeners: {
                 getfeatureinfo: function(event) {
                     //console.log(event);
                     //var obj = jQuery.parseJSON(event.text);
                     //console.log(event.text);
                     //remove pop-ups when selecting others
                     var pops = map.popups;
                     for (var a = 0; a < pops.length; a++) {
                         if (pops.length == 1) {
                             map.removePopup(map.popups[0]);
                         }
                     };
                     map.addPopup(new OpenLayers.Popup.FramedCloud(
                        "chicken",
                        map.getLonLatFromPixel(event.xy),
                        null,
                        GenPopText(event),
                        null,
                        true
                     ));
                 }
             }
         })
     };
    for (var i in infoControls) {
        infoControls[i].events.register("getfeatureinfo", this, showInfo);
        map.addControl(infoControls[i]);
    }
    infoControls.click.activate();
 }//end of get wms feature info

function showInfo(evt) {
    if (evt.features && evt.features.length) {
         highlightLayer.destroyFeatures();
         highlightLayer.addFeatures(evt.features);
         highlightLayer.redraw();
         //console.log(GenPopText(evt));
    } else {
        console.log(evt.text);
    }
}

function GenPopText(evt){
     var temstr= "<b><i>" + evt.features[0].gml.featureType + "</i></b><br/>";
     for(var key in evt.features[0].attributes){
        temstr += "<b><span class='text-capitalize'>" + key + "</span></b>:" + evt.features[0].attributes[key] + "<br/>";
     }
     return temstr
}

I created a function for it because I have several WMS layer.

Now, as what the question implied. I wanted to search the layer based on attributes like its building name as basis and show the pop-up when found and zoom on it.

This is how I want to implement it:

 $("#table_brgy").on("click", "tbody tr", function (e) {
     e.preventDefault();
     var building_name = $(this).find("td").first().text();
     ....
     activateControls(layerName,building_name)
 });

Like this:

When the table row is clicked it will show the matching building info in pop-up.

I have done my research but I can't seem to make it work: LINK 1

Answer 1

The OGC WMS Standard does NOT support queries based on attributes, it only supports them based on points (possible operations here ). What you need is a WFS Service and it's GetFeature operation.

Sample code: http://dev.openlayers.org/examples/wfs-states.html