Toloka documentation

String input with suggest list

    Note

    The task interface configuration guide describes the features of the HTML/JS/CSS editor. You can also try creating a task interface in Template Builder.

    Contains text suggestions that are displayed when the Toloker points the cursor at the input field. There are two types of text suggestions:

    • Universal suggestions used in all tasks.

    • Individual suggestions for different tasks.

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

      Example 1
      exports.Task = extend(TolokaHandlebarsTask, function (options) {
TolokaHandlebarsTask.call(this, options);
}, {
getTemplateData: function() {
var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
data. < array name > = ['string 1', 'string 2', ...
'string n'
];
return data;
},
OnRender: function () {
//Generated DOM element for the task (available via #getDOMElement())
},
onDestroy: function () {
//The task is completed, you can release global resources (if you used them) }
});

function extend(ParentClass, constructorFunction, prototypeHash) {
constructorFunction = constructorFunction || function () {};
prototypeHash = prototypeHash || {};
if (ParentClass) {
constructorFunction.prototype = Object.create(ParentClass.prototype);
}
for (var i in prototypeHash) {
constructorFunction.prototype[i] = prototypeHash[i];
}
return constructorFunction;
}
      Example 2
      exports.Task = extend(TolokaHandlebarsTask, function (options) {
TolokaHandlebarsTask.call(this, options);
}, {
getTemplateData: function() {
var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
data.countries = ['US', 'Germany', 'France'];
return data;
},
OnRender: function () {
//Generated DOM element for the task (available via #getDOMElement())
},
onDestroy: function () {
//The task is completed, you can release global resources (if you used them) }
});

function extend(ParentClass, constructorFunction, prototypeHash) {
constructorFunction = constructorFunction || function () {};
prototypeHash = prototypeHash || {};
if (ParentClass) {
constructorFunction.prototype = Object.create(ParentClass.prototype);
}
for (var i in prototypeHash) {
constructorFunction.prototype[i] = prototypeHash[i];
}
return constructorFunction;
}

    2. Add the {{field type="suggest" name="<output field name>" source=<array name>}} component to the HTML code. Example:

      {{field type="suggest" name="result" source=countries allowCustomInput=true}}

    1. Add the {{field type="suggest" name="<output field name>" source=<input field name>}} component to the HTML code. Example:

      {{field type="suggest" name="result" source=countries allowCustomInput=true}}

    2. Add a field of array string type in the description of input data. Example:

      {
"counries": {
"type": "array_string",
"required": true
}
}

    3. Escape the data and add it to the file with tasks.

      Example

    Parameters

    Parameter

    Description

    Required

    Default value

    type

    Field type: suggest — String input field with suggestions.

    yes

    no

    name

    Attribute for the output data field. Contains the output field name.

    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 Toloker 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 Toloker 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"