xmpp.chapril.org-conversejs/src/templates/roster.html

<form class="pure-form roster-filter-group input-button-group">
    <input value="{{filter_text}}" class="roster-filter"
           placeholder="{{placeholder}}"
           {[ if (filter_type === 'state') { ]}  style="display: none" {[ } ]} >
    <select class="state-type" {[ if (filter_type !== 'state') { ]}  style="display: none" {[ } ]} >
        <option value="">{{label_any}}</option>
        <option {[ if (chat_state === 'online') { ]} selected="selected" {[ } ]}
            value="online">{{label_online}}</option>
        <option {[ if (chat_state === 'chat') { ]} selected="selected" {[ } ]}
            value="chat">{{label_chatty}}</option>
        <option {[ if (chat_state === 'dnd') { ]} selected="selected" {[ } ]}
            value="dnd">{{label_busy}}</option>
        <option {[ if (chat_state === 'away') { ]} selected="selected" {[ } ]}
            value="away">{{label_away}}</option>
        <option {[ if (chat_state === 'xa') { ]} selected="selected" {[ } ]}
            value="xa">{{label_xa}}</option>
        <option {[ if (chat_state === 'offline') { ]} selected="selected" {[ } ]}
            value="offline">{{label_offline}}</option>
    </select>
    <select class="filter-type">
        <option {[ if (filter_type === 'contacts') { ]} selected="selected" {[ } ]}
                value="contacts">{{label_contacts}}</option>
        <option {[ if (filter_type === 'groups') { ]} selected="selected" {[ } ]}
                value="groups">{{label_groups}}</option>
        <option {[ if (filter_type === 'state') { ]} selected="selected" {[ } ]}
                value="state">{{label_state}}</option>
    </select>
</form>