Поле для ввода строки с саджестом

Напишите нам, если не нашли ответ в Справке. Вы можете приложить скриншоты или видео, чтобы ускорить помощь:

Написать в чат  Написать в Telegram

Примечание

Справочник по настройке интерфейса описывает работу редактора HTML/JS/CSS. Вы также можете попробовать создать интерфейс задания в Конструкторе шаблонов.

Саджест — это текстовые подсказки, которые отображаются, когда исполнитель устанавливает курсор в поле ввода строки. Подсказки могут быть:

  • одинаковыми во всех заданиях;
  • своими в каждом задании.
  1. Задайте массив строчек-подсказок в блоке JS (метод getTemplateData), чтобы включить его в набор входных данныхпроекта:

    Пример 1
    exports.Task = extend(TolokaHandlebarsTask, function (options) {
    TolokaHandlebarsTask.call(this, options);
    }, {
    getTemplateData: function() {
    var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
    data. < название массива > = ['строка 1', 'строка 2', ...
    'строка n'
    ];
    return data;
    },
    onRender: function() {
    // DOM-элемент задания сформирован (доступен через #getDOMElement())
    },
    onDestroy: function() {
    // Задание завершено, можно освобождать (если были использованы) глобальные ресурсы
    }
    });
    
    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
    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-элемент задания сформирован (доступен через #getDOMElement())
    },
    onDestroy: function() {
    // Задание завершено, можно освобождать (если были использованы) глобальные ресурсы
    }
    });
    
    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. Добавьте в блок HTML компонент {{field type="suggest" name="<название выходного поля>" source=<название массива>}}. Пример:

    {{field type="suggest" name="result" source=countries allowCustomInput=true}}
    
  1. Добавьте в блок HTML компонент {{field type="suggest" name="<название выходного поля>" source=<название входного поля>}}. Пример:

    {{field type="suggest" name="result" source=countries allowCustomInput=true}}
    
  2. Добавьте поле с типом массив строк в описании входных данных. Например:

    {
    "counries": {
    "type": "array_string",
    "required": true
    }
    }
    
  3. Экранируйте данные и добавьте их в файл с заданиями.

    Пример

Параметры

Параметр

Описание

Обязательный

Значение по умолчанию

type

Тип поля: suggest — поле для ввода строки с подсказками.

да

нет

name

Атрибут для поля выходных данных. Содержит имя поля выходных данных.

да

нет

source

Название массива строк с подсказками. Например: source=countries. Массив определяется в JS-коде проекта (метод getTemplateData).

да

нет

allowCustomInput

Возможность для исполнителя игнорировать подсказки и ввести свою строку.

нет

false

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

placeholder

Текст, отображаемый в пустом поле ввода.

Примечание

Если указано значение value, в поле ввода отображается value, а не placeholder.

нет

нет

hotkey

Горячая клавиша для наведения фокуса на поле.

нет

нет

value

Значение, которое нужно записать в ответы, если исполнитель не заполнил поле.

Примечание

Значение value отображается в пустом поле ввода вместо placeholder.

нет

нет

class

CSS-класс для поля. Например: class="mytask_field".

нет

".field" ".field_type_suggest"

Написать в службу поддержки

Формат входных и выходных данных, описываемых в поле Спецификации блока Интерфейс задания при настройке проекта.

Подробнее

Определенная цель для разметки. Например, модерация комментариев, классификация изображений, транскрипция аудиозаписей или еще что-то.

Подробнее

Файл, содержащий данные, которые нужно разметить. Заказчики используют эти файлы для загрузки заданий. В Яндекс Заданиях поддерживаются файлы в формате TSV.