HOW TO Create an auto complete field

Eric BREHAULT edited this page Sep 23, 2016 · 1 revision

An auto-complete field allows to propose values when the user entered data by suggesting the values matching the letters that have been entered so far.

It can be achieve easily in Plomino because Plomino uses JQueryUI (provided by collective.js.jqueryui).

Simple auto-completion

First, you create a basic text field (in our example: department). To enable auto-completion in this field, we need to build a custom edit template where we will insert the needed JQueryUI javascript settings.

Go to your resources folder (Database design / Others / Resources folder), and add a new Page template named "department_autocomplete" with the following content:

<span>
<script>
$(function() {
    $( "#department" ).autocomplete({
        source: ["Development",
                 "Human resources",
                 "Marketing",
                 "Production",
                 "Purchasing",
                 "Sales"]
    });
});
</script>
<input id="department" type="text" tal:attributes="name options/fieldname; value options/fieldvalue;" />
</span>

It is based on the regular Plomino TEXTFieldEdit template, but we have added a