Views Exposed Filters: how to get functionality shown in this image?

Question

I'm wondering how hard it would be to get the functionality shown in the image, and at the associated webpage, with Views Exposed Filters. How would you go about it? Thanks in advance!

I notice 3 main things:

1. Entering text in the autocomplete search box causes the select list options to filter. (The matching letters are also underlined, which is fancy but not necessary.)

2. Selecting an option causes it to fill the search box.

3. A number after each select list option tells the user how many pieces of content are available.

The actual search box can be seen on this webpage: https://properties.aplaceinthesun.com/AP1724897/Beautifully-Maintained-Four-Bedroom-Villa-For-Sale

Answer 1

You would need to configure the Select2 or Chosen JQuery component to do this.

Create the list of object with count and apply the one of the above library.

For Drupal use Select2 module

Answer 2

Chosen

By default the module will automatically apply itself to any select elements that have more than 20 options, which is a reasonable default for which having Chosen will be useful. To change or disable this automatic enhancement, you can change the selectors (or remove all selectors) from the Apply Chosen to the following elements field on the Chosen administration page.