Converting to and Using Easyautocomplete

25 Apr Converting to and Using Easyautocomplete

Posted at 16:06h in Webmaster Notes by Sarah 0 Comments

NOTE: This article and method (using jQuery Autocomplete) has never worked in WordPress, WordPress seems fine with Ajax Dynamic List, so add the files and change the HTML shown to be deleted in the LEFT column below to implement an autocomplete function on the WordPress FHA website.

EasyAutoComplete (EAC) is a jQuery (not Joomla) extension that uses jQuery AJAX calls to populate a selection list. It is preferred over the original AJAX Dynamic Load (ADL) method because

EAC has a much smaller footprint for faster downloads, and
EAC looks nicer, with matching selections having bold-faced the parts of the selections that match the user type-in.
ADL, although stable, appears no longer to have any maintenance/update website.

Because much of the site to date was using ADL, I am documenting the replacement of ADL by EAC, where I preserve much of the text input section used by ADL, making a few simple changes to make it into a, EAC text input section. Below, you will find side-by-side comparisons of the old ADL and the new EAC use on typical FHA website pages.

AJAX Dynamic List	EasyAutoComplete
	Example from /fhaphp/vacantLots.js
Including the needed files The three underlined files are loaded at the top of the page. The order of loading ajax.js and ajax-dynamic-list.js is important.	Including the needed files Two files are needed for EAC: a style sheet and the EAC javascript. Since it uses Joomla’s built-in jQuery there is no need for an extra ajax routine. or convenience in copy & paste, the two lines to be added are: $document->addStyleSheet(‘/code/easyautocomplete/easy-autocomplete.min.css’); … $document->addScript(‘/code/easyautocomplete/jquery.easy-autocomplete.js’);
Not needed in ADL.	Setup (EAC Only) The Javascript below defines a function to be executed when the page finishes loading. This function has two statements. (Continued after the figure.) The first statement defines a set of options, or parameters telling EAC where its input elements are (by their HTML id) and how to respond to input. The second statement associates the parameter list with an <input type=’text’…> HTML element by the element’s id field, which you can see below. To explain the options: url: defines a function whose single input parameter is the set of characters (‘ltrs’) in the input box. The function returns a URL to be used in the AJAX call to look up the character string in “ltrs” in a database table and return matching entries as a JSON-encoded string. (Read /code/ajax-list-choices.php to see how this works.) getValue: tells EAC where the JSON with matching characters will be found after the AJAX call concludes. list: defines a function to be executed when the user selects one of the returned entries in the list. This function sets “value” to the value of the selected matching entry, then saves this value in a hidden html input element with id=”Lot_hidden”, then triggers the “change” event so the onchange event handlre will be called. maxNumberOfElements: tells how many matching database entries will be presented. match: says to show only return elements that match the type-in ‘ltrs’, although this is already done by the AJAX-called server program.
Input HTML	Input HTML