In this post I’m going to show you how to setup a powerful search interface in Drupal 7 using Views. The search will include a text box for free-form searches as well as a variety of exposed filters for your users.
Step 1: Install Views (obviously)
First, you need to install the Views module. You probably already have it, but if not, here it is. Make sure you enable it after you install it.
Step 2: Layout your Search Strategy
Determine what you want your user interface for search to look like and what results will look like for users. In our case we’ll have a free-form text box and exposed filters for ‘organization’, ‘location’, and ‘topic’. And a search button of course.
Results will show a teaser of the total node. The teaser will include an icon that represents the category the conference is in, the title of the conference (linked to the node), event dates, and the description of the conference. All the conferences will be sorted such that all conferences in the category ‘United States’ will appear first, followed by conferences in the category ‘Canada and Mexico’, and finally conferences that occur all over the globe, we’ll call that grouping ‘International – Beyond Canada and Mexico’.
Step 3: Ensure you have Content Worth Searching
This might seem obvious, but you want to have content in your site before setting this up so that you can test it if nothing else. If you need dummy content that’s fine, go ahead and add some. Devel Generate can help you with that if nothing else, but I recommend having real data that you’ll be using in a live site.
Set up a content type. We’ll call ours ‘conferences’. Add a bunch of different fields to the content type including a field on which you’d like to group your items (let’s say a field list field called ‘Category’). Every conference of this content type will have a category selected to ensure they all get output correctly in the search, so make that a required field.
Note: our search strategy (above) calls for us to have all items in the category ‘United States’ first, then ‘Canada and Mexico’, and then ‘International – Other’. That won’t fit an ascending OR a descending sort, so we’ll want to set them up to be in the order we want them in our search using the keys in the field list for the category field, like so:
1|United States
2|Canada and Mexico
3|International – Other
Setup your icons so you’re using 1 icon for each ‘category’. Create a taxonomy term called ‘icon’. Set your taxonomy terms to the same as the above field list categories (only you don’t need the keys). For each term you set up select the icon (from your computer) that you want to use for each. Then in the ‘manage fields’ area add a field called ‘Icon’ and make it of Field Type ‘Image’. I recommend setting the ALT and Title attributes of the Image field to make those icons accessible. Moreover, make the image size set to ‘thumbnail’ to make it as small as possible
Note: if the thumbnail is too big still for your needs you will have to edit the thumbnail size in the Image settings in Admin > Configuration. Alternatively you may create a new size (not replacing the ‘thumbnail’ default) and use that instead.
Then, back in your content type, create a field called ‘IconCategory’ and make it a Field Type of ‘Term Reference’ and choose the taxonomy you setup above.
Add a bunch of records or use Devel Generate to create a bunch of records of this content type.
Step 4: Create your View
Go to Views and create a new view of type ‘page’. Give it the name ‘Search’. In the main Views page select Format > Unformatted list. In the Format > Settings choose Content: all taxonomy terms as the ‘Grouping field Nr. 1’. Apply your changes.
Next, makes sure Format > Show is set to ‘Fields’.
For Fields, add ‘Content: all taxonomy terms’ at the very top and make sure ‘exclude from display’ is checked. Also make sure ‘Limit terms by vocabulary’ is checked and choose your ‘icon’ vocabulary. Also add the IconCategory field you added to the content type ‘Content: IconCategory’ and make sure ‘Formatter’ is set to ‘Rendered Taxonomy Term’ (to make the icon appear). Add the other fields you want to show, according to the search strategy, in the order you want them to appear.
Under Filter let’s first make sure we only add ‘Content: Published (Yes)’ items. Second, let’s add ‘Content: Type (=Conference)’. Third, we’ll add our free-form text for our users, like so:
Add ‘Search: Search Terms’. Make sure ‘expose this filter to visitors, to allow them to change it’ is checked. Give it the label you want to appear for users. I just called mine ‘Search Terms’. Select, on empty input > Show All. This way when users first go to the page it will display all your conferences and they will use the search and filters to narrow it down. Alternatively, if you’ve got a TON of items in your search go ahead and choose ‘Show None’. Apply (all displays).
Add each exposed filter separately by adding the filter, such as ‘Content: Organization’ and selecting the ‘expose this filter…’ option.
Now let’s do a sort. Under ‘Sort Criteria’ add ‘Content: IconCategory’ first (this will put all of our United States conferences first, etc. Then sort by the other categories you want to sort by, in order of need.
Let’s change the path to ‘/search’.
Add a header to introduce the search interface under ‘Header’. Add ‘Global: Unfiltered text’ and type in whatever you desire.
For the pager, choose ‘Full’ and ‘Paged, 10 items’. This is a very nice feature although it does provide a performance hit to your database. If you have a LOT of items you might want to consider using a module like LitePager instead.
Next, select the Advanced link and add No Results Behavior ‘Global: Unfiltered text’. in case a user comes up empty in their search. This is just good usability. Maybe give them some tips for doing a better search here.
Under Exposed Form choose ‘Basic’ and in ‘Settings’ select ‘Autosubmit’ and deselect ‘Hide submit button’. These options will allow the search to search automatically when a user inputs some text or selects an exposed filter without having to hit the search button. Nice! But let’s leave the search button in case they have JavaScript turned off or just like clicking the search button (maybe they’re used to it).
So, since we’re using JavaScript (AJAX actually), let’s turn that on too. Under AJAX select ‘Yes’.
Step 5: Update your Search Index
To customize what fields your users may search on you’ll want to go to Structure > Content Types > Conferences (or whatever your content type is) > Manage Display. You’ll see a section called ‘Custom Display Settings’ (at the bottom). Make sure ‘Search Index’ is checked and save that.
Refresh your page and you’ll see a ‘Search Index’ sub-tab at the top, to the right of ‘Teaser’. Click that to edit what fields your users may search on.
Use the standard interface on this page to drag any fields users can search on up into the non-Hidden area and save it. Go to Admin > Configuration and re-index your search under ‘Search Settings’. Then run ‘Cron’ and test out your new search at yoursite/search.