The search autocomplete Java Script

The last thing we need to do is create a JavaScript tool that will turn our plain old search box into an autocomplete-capable search box.

We will put this code in search_autocomplete.js, the last JavaScript file that we added in our hook_init() implementation.

The main task of this code will be to modify the search block in order to turn it into an autocomplete function, and then let the Drupal autocomplete behavior do the requisite processing on that field.

Here is the code in its entirety:

* Turn the search block into an autocomplete form.

var SearchAutocomplete = SearchAutocomplete || {};

$('input[name="search_block_form"]:not(.form-autocomplete)') .each(function () {

var newId = $(this).attr('id') + '-autocomplete'; var newElement = $('<input type="hidden"/>') .addClass('autocomplete')

.attr('id', newId).attr('disabled','disabled') .attr('value', SearchAutocomplete.url);



Drupal.attachBehaviors(); });

The first thing done here is to create an empty SearchAutocomplete object. This will be our namespace. In our PHP code, we added an inline script that adds the SearchAutocomplete.url object, so we need to make sure that that namespace exists here in order for that script to successfully run.

Next, we handle the remainder of our code using the jQuery ready event.

But wait! Why aren't we doing this in a behavior? After all, this is the situation that behaviors are good for, right?

Here is the reason for our choice: We need to make sure the behaviors are run again after we finish processing. But if we put code to run Drupal.attachBehaviors() inside of a behavior, we then have to write some extra code to prevent infinite recursion. In our case, the simplest solution to this problem is to run our code in the ready event handler instead of trying to write a recursion detection device.

Let's take a look at the beginning of this function:

$('input[name="search_block_form"]:not(.form-autocomplete)') .each(function () {

// More code here... }).addClass('form-autocomplete');

This first jQuery object grabs elements that match the query input[name=" search_block_form"]:not(.form-autocomplete). This is a little longer than our usual query, but it is not difficult to understand.

The query is composed of three parts: an element query (input), an attribute query ([name="search_block_form"]), and a negation pseudo-class (:not(. form-autocomplete)). In short, the query looks for all <input/> elements with an attribute name that has the value search_block_form. But due to the negation pseudo-class, only elements that don't have the class form-autocomplete match.

The search_block_form name is used by the search module when it creates a block containing a search text field. This part of the script could be extended to find other text fields and turn them into autocompletion fields. For example, to enable autocompletion in your theme's search box, you would use the name search_theme_form.

In short, it matches all search text boxes that don't already have an autocomplete feature. This query should match any Drupal search block, which typically looks something like this:

<input type="text" maxlength="12 8" name="search_block_form" id="edit-search-block-form-1" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />

As we can see from the previous code, it iterates through each of the matching elements. In a moment, we will look at what happens to each element as it is iterated over. Then, once that is done, the class form-autocomplete is added to each of the matching elements.

Adding this class serves two purposes. First, it makes sure that the same code cannot be run on it again (not a likely event, given that we run the code in the ready handler). Second, it identifies that element as an autocomplete form. The Drupal CSS then styles the element accordingly, adding the standard autocomplete throbber inside the text box:

Was this article helpful?

+2 -1


  • daria
    How to attach autocomplete behaviour to input tyoe field?
    9 years ago
  • sanelma
    How to find old autocomplete form?
    9 years ago

Post a comment