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
Option | Value |
---|---|
View name | Latest content |
Machine name | latest_content |
Show | Content (default) |
Of Type | All (default) |
Create a page | Checked (default) |
Page title | Latest content |
Path | latest-content |
Display format | Table |
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.
Any idea how you can theme this drop down? Does it have a normal theme function ? Or will you just have to monkey patch the javascript?
Changing the look and feel using just CSS should be easy. Anything beyond that will require custom code.
Does this work with webform submissions?
No idea. Never tested this with Webform.