Learn how to style features based on feature attributes by following these instructions:

As we've often done, much of the HTML and all of the CSS here has been omitted for brevity. Please view the accompanying source code for a complete understanding of the structure and styling:

searchQueryElem.addEventListener('keyup', function() {
  vectorLayer.changed();
});

Rather than waiting for the user to submit a search request via a form submission, we have opted for a more immediate reaction by subscribing to the keyup event from the input element. When this keyup event is published, we call the changed method on our vector layer. The changed method increments the internal revision counter for the layer and dispatches a change event, which, in turn, calls our ol.style.StyleFunction for each and every feature in the vector source.

It's important to force a rerender of the feature styling from this published event because our feature styles are partly based on the city filtering requirements of the user.

Now, let's move on to the bulk of the code by looking over some of the styleFunction implementation:

var styleFunction = function(feature) {
  var cityName = feature.get('name');
  var searchQuery = searchQueryElem.value;
  var opacity = 1;

When OpenLayers internally calls this function in order to determine the feature styles, it passes in the feature in question as its first argument. It also provides a second argument, representing the view's resolution, which we've left out because we don't make use of it.

Each feature from the GeoJSON file contains the city name within the name attribute. We use the get method from ol.Feature to retrieve this value and store it in the cityName variable. We get the latest search query value from the input field and store it in the searchQuery variable. We also set up a default opacity of 1, which gets used in the feature styling customization.

  if (searchQuery &&
    cityName.search(new RegExp(searchQuery, 'i')) === -1) {
    opacity = 0.3;
  }

We check to see whether the value of the input field is not blank (if it's blank, then the searchQuery variable will be false. If it's not blank, then it infers that the user has entered a search query of some sort, and we wish to filter the cities as requested by the user.

This brings us to the next condition: the city name from the feature (cityName) is checked against the search query from the input field. The search query is converted to a case insensitive regular expression (new RegExp(searchQuery, 'i') and passed to the JavaScript search method. This searches the string for the contents of the regular expression. For example, the city name 'New York, NY' from the feature attribute will match a search query of 'york', or regular expression of /york/i.

If there's a match, then the index of where the match began is returned; otherwise, -1 for no match is returned. If this feature doesn't match the search query, then we set the opacity variable to 0.3. This will make the cities that don't match less visible to the user, in turn, highlighting any cities that do match, which will retain the opacity of 1.

The rest of our style function returns an array with one item containing an ol.style.Style instance to satisfy the function contract that ol.style.StyleFunction requires. The configuration within this will look familiar to earlier recipes, and it doesn't require further explanation. You'll notice that the opacity variable is used for the alpha part of the color property array values, for example, color: [74, 138, 168, opacity]. This is the dynamic result of whether or not the city or feature matches the search query.

You'll also notice that the cityName variable is assigned to the text property of the ol.style.Text instance. The city name forms the visible geometry label.

When the vector layer is instantiated, we assign our style function to the style property.