String input with suggest list

Contains text suggestions that are displayed when the performer points the cursor at the input field. To add a field with a suggest list to the task:

  1. Set the array of prompt strings in the JS code (method getTemplateData) to include it in the project's input data set:

    getTemplateData: function() {
        var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
        data. <arrray name> = ['string 1', 'string 2', ...
            'string n'
        ];
        return data;
    }
    Example
    getTemplateData: function() {
        var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
        data.countries = ['Poland', 'Lithuania', 'Russia', 'Belarus', 'Latvia', 'Germany', 'France'];
        return data;
    }
  2. Add the {{field type="suggest" name="<field ID> " source= <array name>}} component to the HTML code. Field ID must match the field name in the output data description. Example:

    {{field type="suggest" name="result" source=countries allowCustomInput=true}}
    Full list of parameters

    Parameter

    Description

    Required

    Default value

    type

    Field type: suggest — string input field with suggest list.

    yes

    no

    name

    Field ID. Must match the field name in the output data description.

    yes

    no

    source

    Name of array with suggested strings. For example: source=countries. The array is defined in the JS-code of the project ( getTemplateData method).

    yes

    no

    allowCustomInput

    Whether the performer can ignore suggestions and enter their own string.

    no

    false

    validation-show

    The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

    Supported values:

    • Above the input field: "top-left", "top-center", "top-right".

    • Below the input field: "bottom-left", "bottom-center", "bottom-right".

    • To the left of the input field: "left-top", "left-center", "left-bottom".

    • To the right of the input field: "right-top", "right-center", "right-bottom".

    • Don't display the message ("false").

    no

    "top-left"

    placeholder

    The text to display in the empty field.

    Note. If value is set, the input field shows value instead of placeholder.

    no

    no

    hotkey

    Shortcut for setting focus on the field.

    no

    no

    value

    The value to write in responses if the performer didn't fill in the field.

    Note. Value is displayed in the empty field instead of placeholder.

    no

    no

    class

    The CSS class for the field. For example: class="mytask_field".

    no

    ".field" ".field_type_suggest"