Форма поиска

Поисковая форма, содержащая поле ввода и кнопку.

Сам блок b-search, преобразуется в тег <form>, внутри которого лежит элемент layout, отвечающий за раскладку блока.

Рассмотрим BEMJSON блока:

{
    block: 'b-search',
    attrs: { action: '/search.xml' },
    input: {
        elem: 'input'
    },
    button: {
        elem: 'button'
    },
    under: {
        block: 'b-link',
        url: '/',
        content: 'Advanced search'
    }
}

По умолчанию элемент input является поисковой строкой (type: 'text'). Элемент button — кнопкой type: 'submit'.

Если вам необходимо добавить атрибуты этим элементам или самому блоку, достаточно в BEMJSON описать свойство attrs, и перечислить в нем все необходимые атрибуты.

BEMJSON:

{
    block: 'b-search',
    attrs: { action: '/search.xml', id: 'myForm' }
    input: {
        elem: 'input',
        attrs: { value: 'Some text', id: 'myInput' }
    },
    button: {
        elem: 'button',
        attrs: { value: 'My search', id: 'myButton' }
    }
}

Элемент layout миксируется с блоком b-layout-table в BEMHTML шаблоне блока b-search.

Свойства input, button, under, представляют собой элементы для раскладки [ layout-input, layout-button, layout-under ], которые миксируются с элементами cell блока b-layout-table, преобразуясь в HTML в ячейки таблицы.

Свойство under добавляет еще одну строку с ячейкой, в нее можно помещать дополнительную информацию. Например, ссылка «Расширенный поиск» под поисковым полем.