f7-list-item as selectables for f7-autocomplete or f7-smart-select

This is a (multiple allowed):

• enhancement

• Framework7 Version: 2

Would be nice if F7-Autocomplete and F7-Smart-Select also accepts a typical list-item-view where items can be selected (by radio or checkbox).

For example:

This list item is a selectable:

<div class="list selectable-list">
    <ul>
<li>
    <div class="item-content">
        <div class="item-media">
            <i class="icon my-icon"></i>
        </div>
        <div class="item-inner">
            <div class="item-title">
                List element title
            </div>
            <div class="item-after">
                List element label
            </div>
        </div>
    </div>
</li>
..
</ul>
</div>

Actually, I can use this for smart-select to have more than only one text:

<option value="apple" selected data-option-image="http://lorempixel.com/29/29/">Apple</option>

However, when I have albums or product catalogs then it is better to have a typical f7-list-item as selectable. So user can select from a list-view.

The kitchensink shows that the rows of a f7-datatable with "Selectable Rows" could also be selectables for f7-autocomplete or f7-smart-select.

Start by reviewing the F7-Autocomplete and F7-Smart-Select entry points and the Kitchensink example for DataTable selectable rows. Compare their selection behavior with the proposed f7-list-item markup and determine how radio or checkbox selection should work in both components. Done means typical list items can provide selectable entries with the requested richer content.