Hola, estoy con un error respecto al buscador de mi virtual list de mi App jsF7-Cordova.
Extrae todos los items que necesito desde localstorage (es un arrayJson con alimentos), la virtual list ‘funciona’ pero a la hora de realizar la búsqueda la misma busca en los elementos renderizados o ya ‘cargados’.
Estaría necesitando que la búsqueda sea para toda el arrayJson que tengo. ¿Alguien tuvo un problema similar? o ¿qué error estaría cometiendo?
Adjunto codigo:
JS:
// Virtual List: Nutricion
function initializeVirtualListNutrition() {
debb("[ui_alimentos | VirtualList] initializeVirtualListNutrition()");
// Alimentos:
const alimentosString = localStorage.getItem('getSup_alimentos');
const alimentos = JSON.parse(alimentosString);
const totalAlimentos = alimentos.length;
const items = []; // ArrayAlimentos
for (let i = 0; i < totalAlimentos; i++) { // genera el nombre y calorías del alimento
let alimentoID = i; // Mover la declaración aquí
items.push({
title: alimentos[i].nombre_producto,
kcal: alimentos[i].calorias,
subtitle: 'Vg.: ' + yesOrNo(alimentos[i].apto_vegano) + ' | Vt.: ' + yesOrNo(alimentos[i].apto_vegetariano) + ' | Sin Gluten: ' + yesOrNo(alimentos[i].apto_celiaco),
idAlimentoIcon: alimentoID // Usar alimentoID en lugar de i
});
}
let virtualList = app.virtualList.create({
// List Element
el: '.virtual-list-nutrition',
// Pass array with items
items: items,
// Custom search function for searchbar
searchbar: {
el: '.searchbar', // Selector del elemento de búsqueda
searchContainer: '.virtual-list-nutrition', // Selector del contenedor de la Virtual List
searchIn: '.item-title', // Selector del elemento en el que se realizará la búsqueda
},
// List item render
renderItem(item) {
return `
<li class="swipeout">
<div class="item-content swipeout-content">
<div class="item-media centerContain">
<img src="./media/iconFood${item.title}.svg" width="18" alt="icono de Comida"/>
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">${item.title}</div>
<div class="item-title">${item.kcal} kcal</div>
</div>
<div class="item-text">${item.subtitle}</div>
</div>
</div>
<div class="swipeout-actions-left">
<a href="#" class="color-blue swipeout-overswipe alert-reply" id='detallesAlimento' data-name="${item.title}" data-id="${item.title}">Detalles</a>
</div>
<div class="swipeout-actions-right">
<a href="#" class="color-green open-more-actions" data-name="${item.title}" data-id="${item.idAlimentoIcon}">Agregar</a>
</div>
</li>
`;
},
// Item height
height: app.theme === 'ios' ? 63 : 73,
});
}
// Ejecucion:
$$(document).on('page:init', '.page[data-name="alimentos"]', function (e) { // Inicializador:
debb("<View> ================================= | ================================= [alimentos]");
// Asignar el evento click a los elementos .open-more-actions: muestra momentos del dia para registrar alimento [boton agregar comida]
$$(document).on('click', '.open-more-actions', function () {
let button = $$(this);
let swipeout = button.parents('.swipeout');
let name = swipeout.find('.swipeout-actions-right a.open-more-actions')[0].textContent.trim();
debb('Botón de acción seleccionado:', name);
alimentoID = button.data('id');
nombreAlimento = button.data('name');
debb('[ALIMENTOS seleccionados]' + alimentoID + ' | ' + nombreAlimento);
moreActions.open();
});
$$(document).on('click', '#detallesAlimento', function () {
const alimentoID = $$(this).data('id');
localStorage.setItem('alimentoSeleccionado', alimentoID);
debb(alimentoID);
app.views.main.router.navigate('/detalleAlimento/');
});
initializeVirtualListNutrition(); // Lista virtual de alimentos.
}); // ; añadido recientemente
HTML:
<div class="page" data-name="alimentos">
<div class="navbar">
<div class="navbar-inner sliding">
<a class="back"><img src="./media/iconBack.svg" alt=""></a>
<div class="title textoResaltado">Alimentos</div>
<div class="subnavbar">
<form data-search-container=".virtual-list-nutrition"
data-search-item="li" data-search-in=".item-title"
class="searchbar searchbar-init">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search"/>
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button">Cancel</span>
</div>
</form>
</div>
</div>
</div>
<div class="searchbar-backdrop"></div>
<!-- Contenido de la pagina: -->
<div class="page-content">
<div class="searchbar-backdrop"></div>
<div class="list simple-list searchbar-not-found">
<ul>
<li>Ups, lo que buscas no se encuentra!</li>
</ul>
</div>
<div class="card list virtual-list media-list searchbar-found">
<div class="card-content" id="fabri">
<ul class="list media-list virtual-list-nutrition"></ul>
</div>
</div>
</div>
<!-- Fin de contenido de la pagina.-->
</div> <!-- Fin de HTML -->
Muchas gracias!