Por favor alguien me puedes explicar como hacer un Smart Select

1

Hola.
Por favor, alguien me puedes explicar como se hace un smart Select de este tipo

var smartSelect = app.smartSelect.create({
…
on: {
opened: function () {
console.log(‘Smart select opened’)
}
}
})

podeis poner un ejemplo de la parte de HTML y javascript. como se cargaria el smart select con datos obtenidos desde una Api res?
Muchas gracias

2

Hice un jsfiddle con el ejemplo. cambia el codigo por lo que necesites hacer

jsfiddle

3

Hola , muchas gracias por tu ayuda estoy muy estancado con esto.
En tu ejemplo no entiendo porque sale un enlace :face_with_head_bandage:

<a href="/smart/" >

No sé como se quita para que solo salga el Smart-Select sin el enlace .
Me puedes ayudar por favor?
Necesito un select en un pantalla que se carga con datos de una api res. Los datos de la api res(items) ya los tengo , pero no entiendo como cargarlos en el select, es que no entiendo como funciona el smart select :pensive: Esta es la parte que necesito, sin enlace

image
image.png822×440 5.11 KB

Necesito una lista? del tipo <ul>

$$('.append-items-here') esto que significa?

4

A que te referis sin el enlace?
Creo que deberias leer la documentracion de Smartselect, especificamente la seccion layout para entender porque es un tag

https://framework7.io/docs/smart-select.html#smart-select-layout
layout de la documentacion:

<div class="list">
  <ul>
    <!-- Smart select item -->
    <li>
      <!-- Additional "smart-select" class -->
      <a href="#" class="item-link smart-select">
        <!-- select -->
        <select name="fruits">
          <option value="apple" selected>Apple</option>
          <option value="pineapple">Pineapple</option>
          ...
        </select>
        <div class="item-content">
          <div class="item-inner">
            <!-- Select label -->
            <div class="item-title">Fruit</div>
            <!-- Selected value, not required -->
            <div class="item-after">Apple</div>
          </div>
        </div>
      </a>
    </li>
    <!-- Another smart selects or list view elements -->
    ...
  </ul>

Dependiendo que smartselect uses, f7 usa ese “enlace” (a) para dirigirte a una pagina de seleccion.

Por otro lado, el selector $('.append-items-here') Lo puse yo. para poder insertar los items ahi. podes poner lo que vos quieras. o incluso no ponerlo y buscar tu manera de detectar el <select>...</select> asi insertas tus items

edit:
por lo que llegue a entender. queres un smartselect del tipo popover?
de ser ese el caso, simplemente tienes que cambiar el parametro openIn

openIn string page Defines how to open Smart Select. Can be page or popup or popover or sheet

lee aca:

https://framework7.io/docs/smart-select.html#smart-select-parameters