README

Contao 的 Bootstrap Tags Input 端口，提供前端和后端字段，以便向字段或数据库表中添加自定义值（如标签）。

功能

前端和后端支持（inputType : tagsinput）
在 dca 字段配置中，可以设置 Free Input 为 true 或 false。
支持 typeahead.js
针对前端和后端进行了样式设计
异步远程（可选）获取选项
通过拖放对标签进行排序
通过以下操作添加新标签：按下 tab/return/分号和逗号，或者通过离开字段（只要启用 freeInput 并在字段中输入了值）

设置/示例

1. 带有选项或 options_callback 和一个可能标签选择的 Tagsinput

'locations'         => array
(
    'label'     => &$GLOBALS['TL_LANG']['tl_entity_lock']['locations'],
    'inputType' => 'tagsinput',
    'sql'       => "varchar(255) NOT NULL default ''",
    'options'   => array('boston', 'berlin', 'hamburg', 'london'),
    'eval'      => array
    (
        'freeInput'   => false
        'tl_class' => 'w50 autoheight'
    )
),

2. 带有选项或 options_callback 和多个可能标签选择和 freeInput 的 Tagsinput

'locations'         => array
(
    'label'     => &$GLOBALS['TL_LANG']['tl_entity_lock']['locations'],
    'inputType' => 'tagsinput',
    'sql'       => "blob NULL",
    'options'   => array('boston', 'berlin', 'hamburg', 'london'),
    'eval'      => array
    (
        'multiple'        => true,
        'freeInput'       => true,
        'multiple'        => true,
        'maxTags'         => 3,
        'maxChars'        => 12,
        'trimValue'       => true,
        'allowDuplicates' => true,
        'tl_class' => 'w50 autoheight'
    )
),

3. 带有 freeInput 和一个可能标签选择的 Tagsinput

'locations'         => array
(
    'label'     => &$GLOBALS['TL_LANG']['tl_entity_lock']['locations'],
    'inputType' => 'tagsinput',
    'sql'       => "varchar(255) NOT NULL default ''",
    'eval'      => array
    (
        'freeInput'   => true,
        'tl_class' => 'w50 autoheight'
    )
),

4. 带有 freeInput 和多个可能标签选择的 Tagsinput

'locations'         => array
(
    'label'     => &$GLOBALS['TL_LANG']['tl_entity_lock']['locations'],
    'inputType' => 'tagsinput',
    'sql'       => "blob NULL",
    'eval'      => array
    (
        'multiple'    => true,
        'freeInput'   => true,
        'tl_class' => 'w50 autoheight'
    )
),

5. 带有远程选项和一个可能标签选择的 Tagsinput

'locations'         => array
(
    'label'     => &$GLOBALS['TL_LANG']['tl_entity_lock']['locations'],
    'inputType' => 'tagsinput',
    'sql'       => "int(10) unsigned NOT NULL default '0'",
    'eval'      => array(
        'placeholder' => &$GLOBALS['TL_LANG']['tl_member']['placeholders']['locations'],
        'freeInput'   => false,
        'mode'        => \TagsInput::MODE_REMOTE,
        'remote'      => array
        (
            'fields'       => array('title', 'id'),
            'format'       => '%s [ID:%s]',
            'queryField'   => 'title',
            'queryPattern' => '%QUERY%', 
            'foreignKey'   => '%parentTable%.id',
            'limit'        => 10
        ),
        'tl_class' => 'w50 autoheight'
    )
),

如你所见，必须有远程配置，包括标签格式和字段，这些是从 foreignKey 关系中获取的。foreignKey 必须是一个有效的数据库表引用，通过给定的表名和字段。也可以从当前记录中的字段引用表名，通过在字段名前后添加百分号。这可能对动态 Tagsinput 字段有所帮助。queryField 代表给定 typeahead 查询的查找字段。为了提供自定义查询模式以进行 LIKE 搜索，只需添加自定义 queryPattern 并将百分号放置在您想要的位置；

5. 从关系表获取远程选项的 Tagsinput，具有多个可能标签选择和 freeInputs

'locations'         => array
(
    'label'     => &$GLOBALS['TL_LANG']['tl_entity_lock']['locations'],
    'inputType' => 'tagsinput',
    'sql'       => "blob NULL",
    'eval'      => array(
        'placeholder' => &$GLOBALS['TL_LANG']['tl_member']['placeholders']['locations'],
        'freeInput'   => true,
        'mode'        => \TagsInput::MODE_REMOTE,
        'remote'      => array
        (
            'fields'       => array('title', 'id'),
            'format'       => '%s [ID:%s]',
            'queryField'   => 'title',
            'queryPattern' => '%QUERY%', 
            'foreignKey'   => '%parentTable%.id',
            'limit'        => 10
        ),
        'save_tags' => array(
            'table'    => 'tl_calendar_events',
            'tagField' => 'title',
            'defaults' => array
            (
                'tstamp'    => time(),
                'pid'       => 1,
                'type'      => 'community',
                'published' => false
            )
        ),
        'tl_class' => 'w50 autoheight'
    )
),

如果您想将标签作为实体添加到远程模式中，您必须启用 freeInput 并提供有效的 save_tags 配置，如上所述。tagField 应该是 save_tags 表中的字段，其中应存储来自 tagsinput 的用户输入。

6. 从选项或 options_callback 获取远程选项的 Tagsinput，具有多个可能标签选择和 freeInputs 和 tags_callback

'locations'         => array
(
    'label'     => &$GLOBALS['TL_LANG']['tl_entity_lock']['locations'],
    'inputType' => 'tagsinput',
    'options'   => array('boston', 'berlin', 'hamburg', 'london'),
    'sql'       => "blob NULL",
    'eval'      => array(
        'placeholder' => &$GLOBALS['TL_LANG']['tl_member']['placeholders']['locations'],
        'freeInput'   => true,
        'mode'        => \TagsInput::MODE_REMOTE,
        'remote'      => array
        (
            'queryPattern' => '%QUERY%', 
            'limit'        => 10
        ),
        'tags_callback' => array(array('MyClass', 'addTagAttributes')),
        'tl_class' => 'w50 autoheight'
    ),
),

评估选项

save_tags 设置

远程设置

tags_callback

tags_callback 应该是一个有效的回调，可用于操作标签对象。

// tags_callback example callback
class tl_member_custom extends \Backend
{
    public function addTagAttributes($arrOption, DataContainer $dc)
    {
        $objTag = MyTagsModel::findByPk($arrOption['value']);

        if (!$objTag->published)
        {
            $arrOption['class'] .= ' new';
        }

        return $arrOption;
    }
}

heimrichhannot / contao-tagsinput

维护者

详细信息