Filtro dati jQuery Mobile, in caso di nessun risultato

Attualmente sto esplorando jQuery Mobile per sviluppare una versione mobile di una dashboard con informazioni di tracciabilità. E quale è il piano, è utilizzare una semplice lista non ordinata con tutti gli ordini, e le persone possono cliccare sul link di cui vogliono sapere di più. Poiché questa lista può diventare piuttosto grande, è bello avere un'abilità di filtro che è facile da fare con jQuery Mobile.Filtro dati jQuery Mobile, in caso di nessun risultato

Proprio qualcosa di simile:

<ul data-role="listview" data-filter="true"> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
    <li><a href="#">Item 3</a></li> 
    <li><a href="#">Item 4</a></li> 
</ul>

data-filter="true" si occupa di visualizzare una barra di ricerca e in realtà funziona abbastanza piacevole.

Ma il mio unico problema è che quando non viene trovato nulla, non visualizza nulla e vorrei che ci fosse un po 'di testo che dice qualcosa del tipo "Scusa, nessun ordine è stato trovato".

Qualcuno sa se questo è possibile con jQuery Mobile o è qualcosa che deve essere codificato da zero?

fonte

2012-03-13 Crinsane

Controllare se '$ ('ul [data-role =" listview "]> li'). Size() <1' forse? Se non esiste una funzione incorporata che sia – Johan

@ Johan, Grazie, ho pensato a qualcosa del genere, ma prima volevo essere sicuro che non esistesse alcuna funzione built-in. Perché è possibile ottenere la barra di ricerca con un attributo di dati, è possibile modificare il segnaposto con un attributo, quindi ho pensato che la modifica del 'caso senza risultato' non sarebbe stato un problema. – Crinsane

Ok, sembra che dovrebbe esistere qualcosa di simile, credo che dovrai aspettare e vedere se qualcuno che lo conosce meglio di me risponde. Almeno adesso hai un piano di backup :) – Johan

//wait to do event binding until the page is being initialized 
$(document).delegate('[data-role="page"]', 'pageinit', function() { 

    //cache the list-view element for later use 
    var $listview = $(this).find('[data-role="listview"]'); 

    //delegate event binding since the search widget is added dynamically 
    //bind to the `keyup` event so we can check the value of the input after the user types 
    $(this).delegate('input[data-type="search"]', 'keyup', function() { 

     //check to see if there are any visible list-items that are not the `#no-results` element 
     if ($listview.children(':visible').not('#no-results').length === 0) { 

      //if none are found then fadeIn the `#no-results` element 
      $('#no-results').fadeIn(500); 
     } else { 

      //if results are found then fadeOut the `#no-results` element which has no effect if it's already hidden 
      $('#no-results').fadeOut(250); 
     } 
    }); 
});

Ecco una demo: http://jsfiddle.net/6Vu4r/1/

fonte

2012-03-13 18:40:23 Jasper

Ok, sembra funzionare abbastanza bene. Quindi non c'è una vera opzione per questo ... hmm, okay. A proposito, ti accorgi che una volta arrivato a un punto in cui non vengono trovati risultati, la prossima lettera che digiti l'elemento '# no-results' si dissolverà di nuovo, la lettera successiva sarà fadeIn di nuovo, ecc. – Crinsane

@Crinsane Ho pensato che usando '.not (this)' ometterebbe l'elemento '# no-results' dalla selezione ma dovevo cambiarlo in' .non ('# no-results') '. Ho ** aggiornato ** la mia risposta, ecco la nuova demo: http://jsfiddle.net/6Vu4r/1/ – Jasper

Anche se speravo di mettere a punto una build in funzione, mi piace anche questo pezzo di codice, quindi grazie tu molto! – Crinsane

Grazie

sto usando questo codice con un'estensione. Non voglio scrivere ogni volta questo # no-result li.

$(document).delegate('[data-role="page"]', 'pageinit', function() { 

var $listview = $(this).find('[data-role="listview"]'); 
$listview.append('<li id="no-results" style="display:none;">[No results found]</li>'); 
$listview.listview('refresh'); 
$(this).delegate('input[data-type="search"]', 'keyup', function() { 
    if ($listview.children(':visible').not('#no-results').length === 0) { 
     $('#no-results').fadeIn(500); 
    } else { 
     $('#no-results').fadeOut(250); 
    } 
}); 
});

fonte

2012-11-12 13:53:29 Adrian

Se si utilizza il codice @ di Jasper in un elenco con auto-divisori si potrebbe scoprire che il nascosto "non ha prodotto risultati" elemento alambicchi crea un divisore. Per evitare che ho usato questo codice:

if ($listview.children(':visible').not('#no-results').length === 0) { 

     // if none are found then fadeIn the `#no-results` element 
     $('#no-results').fadeIn(500); 

    } else { 

     // if results are found then fadeOut the `#no-results` element which 
     // has no effect if it's already hidden 
     $('#no-results').fadeOut(250); 
     $listview.children('.ui-li-divider:visible').not('#no-results').each(function()    { 
      if($(this).next("#no-results").length > 0) 
       $(this).hide(); 
     }); 
    }

Se qualcuno ha una soluzione migliore si prega di condividere.

fonte

2013-12-12 16:45:28

Filtro dati jQuery Mobile, in caso di nessun risultato

risposta

Problemi correlati