Drupal 6 JavaScript and jQuery - Ebook-Cours.com

[ 297 ]
Chapter 9
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:
Note the grey circle near the end of the search box. That is the location of the
throbber icon. When the autocompletion AJAX script is running, the throbber icon
will be displayed as a spinning circle.
Let's now turn to the anonymous function that is run inside the each() function:
$('input[name="search_block_form"]:not(.form-autocomplete)')
.each(function () {
var newId = $(this).attr('id') + '-autocomplete';
var newElement = $('')
.addClass('autocomplete')
.attr('id', newId).attr('disabled','disabled')
.attr('value', SearchAutocomplete.url);
$(this).after(newElement);
}).addClass('form-autocomplete');
In a nutshell, the highlighted code creates a new hidden element that contains
instructions for the autocomplete handler. This hidden element is then added after
the search box input element.
The anonymous function called by each does the following. First, it creates a new ID
based on the id attribute of the current input element. This ID will be assigned to
the new hidden element. The autocomplete.js library will use the ID to correlate
the new hidden element with the field that it describes. So the naming convention
used (original ID plus -autocomplete) is important.
This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009
2205 hilda ave., , missoula, , 59801