String input with suggest list

Contains text suggestions that are displayed when the performer puts the cursor in 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'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() {    // DOM element of the task created (available via #getDOMElement())   },  onDestroy: function() {    // The job is complete and you can release global resources if they were used  }});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] = prototype [i];  }  return constructor function;}
    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() {    // DOM element of the task created (available via #getDOMElement())   },  onDestroy: function() {    // The job is complete and you can release global resources if they were used  }});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] = prototype [i];  }  return constructor function;}
  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}}
Full list of 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 performer can ignore suggestions and enter any other 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"