Using Autocomplete Exposed Filters with Views

Recently I was working on a site and was tasked with adding a author filter to a view page that listed out blog posts. The blog post content type had a content reference field to another content type for the author relationship. The client wanted to make it simple for an end user to search for blog posts of a specific author quickly an easily.

Given the number of authors, a dropdown or a multi-select was really out of the question—there are just too many for either of those to make sense. My next thought was to use an autocomplete field. Little did I know that Drupal views does not support autocomplete exposed filters out of the box. Luckily though, this problem can be solved using the Views Autocomplete Filters module.

I have set up a similar scenario below to show you how I made everything come together at the end. First, imagine that we have two content types—Client and Project. Client only has the title and body fields, and Project has title, body, and a client reference. I have also created a view that displays a table of Projects. Since Projects have a Client reference field, I have added the following relationship: 

Now that the relationship is in place, I’m going to add another field to the view. This is not required, but it makes it easier to recognize that the filter we are going to add works properly. The new field is a a content title and it is configured like this:

 

 

 

Now that we have the field showing, it should be obvious if the relationship is working:

Now it is time to add the autocomplete filter. If you ahem not already, install and enable the Views Autocomplete Filters module. Next, add a new filter for content title and configure it like so:

The configuration above sets the relationship of the filter so that it uses the title field of the Client node that is related to the Product. You will also notice that the field for autocompleted results is pointing to the Client reference field we added earlier and that the filter operator is set to contains. If everything is configured correctly, you should see something like this:

That’s all there is to it! Now you have a working autocomplete exposed filter on a view. The beauty of the autocomplete filed is that it makes a lot of sense for both small and large datasets as opposed to normal selects and multi-selects, which can become obtrusive when you have many items. Now you can keep your UI nice and clean!

Happy Drupaling!