Drupal 7 Views Autocomplete Filter

By shane
Mon, 2013-02-25 22:08
8 comments
Daily Dose of Drupal Episode #116

The Drupal 7 Views Autocomplete Filters module adds the ability to create Views exposed filters that are autocompletes. This is useful to replace the traditional text field exposed filter or even a drop down exposed filter.

In this episode you will learn:

  • How to create a simple Drupal view with an Autocomplete exposed filter
  • How to create a more complex Drupal view using an Entity Reference field with an Autocomplete exposed filter

Thanks to Drupalize.me for sponsoring this episode.

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 116 and today we’re going to be going over the Views Autocomplete Filters Module. This module basically adds autocomplete functionality to Views Filters so Views View Filters before and you’ve used the text field where maybe you could search for a node title or something like that, this just takes that and adds it so it’s an autocomplete and it allows you to more easily search the content in your View.

But before we get started; as always I’m Shane Thomas, you can follow me on Twitter at smthomas3, also go to codekarate.com and sign up for the newsletter. Thanks again to drupalize.me for sponsoring this episode of the Daily Dose of Drupal, check them out if you haven’t already because there are great resource for anyone who’s trying to learn Drupal.

They have some very basic concepts on getting started with Drupal and they have some of the most complex topics you will ever need to cover if you’re a Drupal developer so give them a look and use CK20FEB if you do decide to sign up and become a member.

They have a bunch of free videos too so check those out. Let’s go ahead and get started; let’s hop over to our test site here and I’ve already downloaded the Views Autocomplete Filters Module so let’s go ahead and turn that on. Once we get that turned on we’re going to go ahead and create a View. I’m going to create two different Views on this example so you can see two different used cases for where this might be useful.

The first View … I’m going to show you first my content types, I have a client content type and a contact content type. The Client Content Type is just a really simple content type with a title I believe and maybe a body field and the Contact Content Type has and Entity Reference Field and if you’re not familiar with Entity Reference Field there is a Daily Dose of Drupal video on how that works and I think that’s where I actually build out these content types.

So I’m going to create two different Views that showed these different types of content and you’ll see that how this works and how each client can have multiple contacts assigned to it so you may have a company that has three contacts or three different people in it, you can set it up that way so let’s go ahead and start by creating a simple View, we’re going to call this Clients and I want to put autocomplete because I may have one other one that’s already called Clients and we’re going to show contents of type Client, we’ll go ahead and create a page and we’ll go ahead and hit Continue and Edit. Well let’s actually make it … we’ll just leave everything at its default to keep it simple.

The only thing we want to do though is instead of showing content we want to show fields just because that’s a little bit easier to show how this works so we’re just going to show the title and we’ll go ahead and add the body, I don’t know that I have anything and any of these but we’ll see.

So it’s just a title and the body of these Client Content Types so as you can see here there’s another clients … another test client ABC and if we want to format this a little better just to make it a little more readable we’ll go ahead and make it a table format, you can of course set this format to whatever you want.

Now you can see here’s the title over here, here’s the body with the text, we’ll give the title a label and call it Client Name to again just make it a little more readable and obviously I only have four here but just imagine that there’s a bunch more, you could have hundreds. What we're going to do now is we’re going to add a filter and we want this filter to eventually be an autocomplete.

So typically; what you do if you wanted to allow people to search by the actual client name is you have to first realize that the client name is simply just a Title Field so I’m going to select Content Title, I’m going to hit apply to all displays and I’m going to exposed this filter to visitors which will allow them to change it. Here I can change the operator and since I want to be able to search for any part of the word I’m going to use Contains. You can of course use different ones here such as Starts With or Ends With or contains any words, contains all words.

I’m just going to use contains because that means I can put any string of text that appears in sequence in the title and it will show up. So this is in general how it works. Here’s the Use Autocomplete checkbox but this isn’t there unless you’ve installed the Views Autocomplete Filter Module. We’re going to go ahead and do or click Apply All Displays and we’re not going to check that quite yet.

So when we scroll down and you see now we have an exposed filter here so if I start typing in the word Client and I hit Apply it gets rid of any of that don’t have that exact string. So you can see that that works. Now I’m going to come back and actually check this Use Autocomplete Checkbox. You can select the maximum number of items in the Autocomplete, select the Field to use for the Autocomplete results so we of course want the client name and then you can have unformatted dropdowns and unformatted suggestions, so we’ll hit Apply All Displays, I’m going to save this and actually go to the page so we can see it in action.

So now you can see that it looks like a little circle here for the Autocomplete and now if I start typing it in you can see that Test Client comes up because that’s the only one that matches, simple click on that and click Apply and it will of course filter just by that. If I want to search for another one you can search another new client and click Apply and it will of course filter that based on that as well.

So as you can see it can be useful especially if the list is very long but its usefulness is somewhat limited because searching by just a string inside of this client name would probably be sufficient. However; what if we wanted to display a list of all the contacts and their corresponding clients? So we want to have a listing of the contacts and the clients but we want it to be able to filter to be able to see all the contacts for a specific client.

So I’m going to go ahead and create a new view; I’m going to call this one Contacts Autocomplete and I’m going to show content of type contact and I’m going to use a table again of fields, we’ll go ahead and show as many as we need here, it says an example, go ahead and get started. Right now we have the title which is the title of the contact, we’re also going to add in the contact phone number and we’ll go ahead and take a look at this down here so you can see here’s the title or the contacts, the contact phone number.

I’m going to change the label here and call this Contact Name, what we also want to do though is we want to display the client that this contact is a part of. So Contact B and Contact A maybe one client in these contact’s may be part of the different client and this is all based up that Entity Reference Field.

So what I’m going to do is I’m going to come into advance and I’m going to add a Relationship and I’m going to find a field that each contact node has a content type that links out to the client. So I’m going to use this Entity Reference so this is going to bridge to the content entity so that means it’s going to bridge to the client that is referenced via the field_client which is on the content … actual content type. So that might be a little confusing but just follow along here and hopefully it will make sense here in a second so go ahead and we can require this because I need that to be there. Now this represents the Client Node.

So each one of these contacts is going to be referenced out to the actual client, so I want to also display the title of the client as well. So I’m going to go in and I’m going to find the content title but I’m not going to display the content title of the actual contact, I want to display the content title of the client so this I select the relationship here Content Entity Reference from Field Client and I change this to client name and I’ll go ahead and hit Apply.

Now this should give me the client name that’s associated with the Contacts. So as you can see ABC Co. has three different contacts, another new client has one contact and another client without a new has two contacts here. So what we want to be able to do though is we want to be able to actually select in an exposed filter the client so we can see all these contacts that are available for that client.

So the first thing I would generally do is I’m going to go ahead and save this and I’m going to open up in a new tab, I’m going to open up the contact content type, come into manage fields and inside this entity reference field there’s a checkbox down here for render the Views filter as the select list. This is generally the first thing I would do because it’s the easiest one to search to and it’s the easiest one to find and I’ll show what this does first.

So now I’m going to add a filter, I’m going to filter on this field client … let me go ahead and find it in here, so this field client … and this is just to show you how you could render it as a dropdown so this is the first where were going to do it and we’re going to go ahead and expose this filter, we’ll go ahead and select this as clients, say as one of … we don’t need to worry about relationship in this circumstance so we click apply and if you’re just doing it this way you don’t actually need this relationship here.

So if you just wanted to display a dropdown you wouldn’t need that relationship and as you can see it works. I can select ABC Co., click Apply, it only shows me this three from ABC Co. Now that works great if you want to do it that way but what if you had 300 clients and 10,000 contacts? At that point this dropdown isn’t going to become very manageable which is why I’ve added this relationship and why I’m going to show you another way you can do this.

So I’m going to go ahead and get rid of this exposed filter so now it’s back to the normal view. Now I’m going to add the Autocomplete in so I need to make sure I add the autocomplete again for the title because I’m searching the title of this client content type so I go ahead and select the title and in this case I do want to use the relationship because this is referencing the actual client content and I want to expose the filter, here I want to change this to contains and I also will use autocomplete.

The important thing here is you want to select the field with the autocomplete results; you need to select this reference field for the client name. Now we click Apply, I’m going to save this and we’ll view the page and now I actually like to change this to say Client Name and not Title but I can search for a specific client name. For instance we’ll search for another client, I select another client, click Apply, it show me only the contacts for another client.

So ideally you’d come back in here and you’d change this to say client name and everything would be good to go and you have a nice view where you’re not only using the Views Autocomplete Filters Module but you’re also using it with the Entity Reference Module with some relationships so it allows you to … in this case I feel like it’s a much more useful way to use this Autocomplete because if you had thousands of clients to look through this is actually going to be able to pull it up for you, allow you to search through this list much more easily than if you just had a dropdown or you just had a text field.

So go ahead and give it a try in your next Drupal project where you need to build out some pretty complex views and you want to use this autocomplete module against the Views Autocomplete Filters Module, it’s a pretty cool module.

Thanks again to drupalize.me for sponsoring this episode. If you’d like to sponsor an episode of the Daily Dose of Drupal go ahead and go to codekarate.com, click on the code karate sponsorship page and find out some more information. Thank you for watching the Daily Dose of Drupal and we’ll see you next time.

5 Secrets to Becoming a Drupal 7 Ninja

Comments

…what I needed: Entity reference autocomplete exposed filter. Cool! Thanks!

Hi there, thanks for this tutorial.

I've done more or less the same but instead of creating a page I've created a block:
1st issue: the text box goes beyoond the boundaries of the block, how can I male it fit?
2nd issue: if I activate the autosubmit, hidding the apply button the moment I start to write in the text box the candidates appears just an instant and the go away not letting me choose, so as result the border of the text box turns red, as it was an error. Actually, if I go to the view editting page and I taste from there the filter, the minute I put a letter I got this:

An AJAX HTTP request terminated abnormally.
Debugging information follows.
Path: http://parles.upf.edu/en/admin/views/ajax/autocomplete/taxonomy/14
StatusText:
ResponseText:
ReadyState: 4

And then a new page with the filter saying this: Unable to find term: f (the letter I just reached to type)

Thanks for your help.

Fix unable to find term with setting of 'error display' on the exposed filter.

Set of the AJAX by setting advanced -> exposed form to input required and ajax to yes

it is possible to show a phare "no match" when the form find no result?
i set ajax yes and exposed form to input required but the only thing is the input border red

I want when user select a item in suggested list(items load below search) it will redirected to that content,it that possible with your module?

Post new comment