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 performer 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.

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

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

exports.Task = extend(TolokaHandlebarsTask, function (options) {
  TolokaHandlebarsTask.call(this, options);
}, { 
  getTemplateData: function() {
    var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
    data.countries = ['Poland', 'Lithuania', 'Russia', 'Belarus', 'Latvia', '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;
}

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}}
Copied to clipboard
```

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}}
Copied to clipboard
```

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

{
  "counries": {
    "type": "array_string",
    "required": true
  }
}
Copied to clipboard

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

Example

Parameters


Parameter	Overview	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 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"`


Parameter	Overview	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 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"`

Contact support