JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<div id="map"></div>
<div id="docs">
    <p>Enter text for a CQL filter to update the features displayed.
        <br>
        <form name="cql_form" id="cql_form">
            <label for="cql">CQL:</label>
            <input id="cql" type="text" value="ID_ADE = '9'">
            <input type="submit" value="update">
            <input type="reset" value="reset">
        </form>
</div>

CSS

#map {
    height: 300px;
    width: 600px;
}
#cql {
    width: 200px;
}

JavaScript

var map;
var states

var geographic = new OpenLayers.Projection("EPSG:4326");
var mercator = new OpenLayers.Projection("EPSG:900913");


map = new OpenLayers.Map('map', {
    projection: mercator
});

var osm = new OpenLayers.Layer.OSM("OpenStreetMap (Mapnik)");
states = new OpenLayers.Layer.WMS(
    "States", "http://bhmapogcbase.pbh.gov.br/bhmapogcbase/ows?service=wms", {
    LAYERS: 'ide_bhgeo:ADE',
    transparent: true
}, {
    isBaseLayer: false
});

// update filter and redraw when form is submitted
updateFilter();
var form = document.getElementById("cql_form");
form.onsubmit = updateFilter;


map.addLayers([osm, states]);
map.addControl(new OpenLayers.Control.LayerSwitcher());

// if you want to use Geographic coords, transform to ESPG:900913
var ddBounds = new OpenLayers.Bounds(-120, 20, -60, 60);
map.zoomToExtent(ddBounds.transform(geographic, mercator));

function updateFilter() {
    var cql = document.getElementById("cql");

    // use a CQL parser for easy filter Validation
    var format = new OpenLayers.Format.CQL();

    //if filter exists, remove it
    //This will also be useful when empty filter is present
    if (states.params.CQL_FILTER) {
        delete states.params.CQL_FILTER;
    }

    var filter;
    try {
        filter = format.read(cql.value); //we are just checking if we can parse it
    } catch (err) {
        if (cql.value != "") { //no need to give alert when filter is empty
            alert("Filter cannot be parsed");
        }
    }
    if (filter) {
        states.mergeNewParams({
            'CQL_FILTER': cql.value
        }) //add the cql filter to the Layer
    }

    //redraw the layer
    states.redraw({
        force: true
    });
    return false;
}