How to Add Autocomplete Functionality to Text Filters in Views

Views Autocomplete Filters is a simple yet powerful module that allows you to add autocomplete functionality on any text filter on a Views page.

The autocomplete functionality will only work for basic text fields (Content: Title), and Field API text fields. Also, for the filter to work, the field must be displayed on the view.

For example, if you want to add an autocomplete filter to a view that allows users to filter content by title, then the title field needs to be added as a filter criteria as well as a field.

In this tutorial, I’ll show you how to use the module on a basic views page. We’ll create a view that lists all content in a table and we’ll use the module to create an autocomplete filter that allows users to filter content by title.

Getting Started

Before we begin, go download and install Views Autocomplete Filters, Views and Ctools.

If you use Drush, run the following command:

$ drush dl views_autocomplete_filters views ctools

Create Basic View

First we’ll start off by creating a basic views page that displays content in a table.

1. Go to Structure -> Views and click on the “Add new view” link.

2. Fill in the “Add new view” form with the values defined in Table 1.0 and click on “Continue & edit”.

Table 1-0. Create a new view

3. Click on the “Add” link within the “Filter criteria” field-set and select “Content: Title” then click on Apply.

4. Now we need to configure the filter in a particular way.

First, select Contains from the Operator drop-down list. Second, check the “Expose this filter to visitors, to allow them to change it” checkbox. This will change the filter into an exposed filter.

And finally, check the “Use Autocomplete” checkbox. This option will add autocomplete functionality to the exposed filter.

5. Save the filter settings by clicking on “Apply (all display)”.

6. As stated earlier, make sure that the “Content: Title” field has been added to the view as a field.

7. Save the view and go to /latest-content to test it out.

Start typing into the Title field and if all steps have been completed correctly you should see an autocomplete list appear.

If you want to add autocomplete functionality to a filter, then take a serious look at this module before writing any custom code. For most use cases the Views Autocomplete Filters module is the best solution.