[VirtueMart5] AutoComplete and Mustache

(written by Grok and reviewed by Max Milbers)

Audience: Product-edit and media-search extensions; anyone replacing jQuery UI autocomplete
Related: VM Init Registry · dual load in vmJsApi

1. Why two libraries

Related products, related categories, custom field search, media search: four boxes that used to mean jQuery UI autocomplete plus a private HTML builder. Templates could not override the result card without forking JS.

VirtueMart’s answer: autoComplete.js for the query, Mustache for the HTML. The card is a template you can override. The library load is the same dual pattern as Sortable.

2. How it loads

vmJsApi::addvScriptModule('autocomplete/autoComplete-global');
vmJsApi::addvScriptModule('mustache/mustache-global');

Globalizers assign window.autoComplete and window.Mustache and signal AutoComplete Ready / the Mustache equivalent (priorities in the 510 range — after libs, before or with core ≤500 business code). Wait with:

VMInit.waitForGlobal('AutoComplete Ready', initMySearch);

3. Data and markup

• Select the input by class or id. The same class can appear three times on product edit. Loop. Do not assume a singleton.
• Configure with data-* (JSON URL, token, template name), not a third options object in a script tag.
• JSON from PHP: a list of items the Mustache template already understands (media cards, related product rows). Keep that contract if you add a search.
• Override the Mustache sublayout (admin mustache/…) rather than concatenating HTML in JS.

4. Quick start

1. Wait for AutoComplete Ready (and Mustache if you render cards).
2. Query all matching inputs, not getElementById once.
3. On select, write the chosen id into a hidden input; do not only keep the label.
4. Register with VMInit.add(..., 550, { reInit: true }) so AJAX product tabs still work.

5. Do’s and don’ts

• Do not bring jQuery UI autocomplete back “just for this field”.
• Do not build result HTML with string concat if a Mustache template exists.
• Do not init only the first .autocomplete on the page.
• Token: vRequest::getFormToken() on the JSON URL. Core getMedia / getRelated check token and ACL.

6. Paths

• media/com_virtuemart/js/autocomplete/autoComplete-global.js
• media/com_virtuemart/js/mustache/mustache-global.js
• Admin Mustache sublayouts under administrator/components/com_virtuemart/sublayouts/mustache/