jQuery Mobile List Filter Behave Like Auto-complete

Question

La listview di jQuery Mobile e il filtro di ricerca funzionano e hanno un bell'aspetto. Tuttavia, vorrei modificare il comportamento in modo che si comportasse più come un controllo di completamento automatico, vale a dire che gli elementi dell'elenco non vengono visualizzati fino a quando non viene immesso un filtro di ricerca.

Ho visto altre persone che utilizzano il completamento automatico dell'interfaccia utente di jQuery ma sembra eccessivo dover includere questa libreria e il lavoro extra per definire i risultati.

Questo può essere fatto con jQuery Mobile 1.0?

Answer 1

Si potrebbe provare qualcosa di simile

• http://jsfiddle.net/ULXbb/3/
• http://jsfiddle.net/ULXbb/5/ (Tasto clic)

JS

$("input[data-type='search']").keyup(function() { 
    if($(this).val() == '') { 
     $("ul:jqmData(role='listview')").children().addClass('ui-screen-hidden'); 
    } 
}); 

$('a.ui-input-clear').click(function() { 
    $("input[data-type='search']").val(''); 
    $("input[data-type='search']").trigger('keyup'); 
}); 

HTML (necessità di aggiungere l'attributo class ad ogni <li> elemento class="ui-screen-hidden")

<div data-role="page" id="filterMe"> 
    <div data-role="content"> 
     <ul data-role="listview" data-filter="true"> 
      <li class="ui-screen-hidden"><a href="#">Acura</a></li> 
      <li class="ui-screen-hidden"><a href="#">Audi</a></li> 
      <li class="ui-screen-hidden"><a href="#">BMW</a></li> 
      <li class="ui-screen-hidden"><a href="#">Cadillac</a></li> 
      <li class="ui-screen-hidden"><a href="#">Chrysler</a></li> 
      <li class="ui-screen-hidden"><a href="#">Dodge</a></li> 
      <li class="ui-screen-hidden"><a href="#">Ferrari</a></li> 
      <li class="ui-screen-hidden"><a href="#">Ford</a></li> 
      <li class="ui-screen-hidden"><a href="#">GMC</a></li> 
      <li class="ui-screen-hidden"><a href="#">Honda</a></li> 
      <li class="ui-screen-hidden"><a href="#">Hyundai</a></li> 
      <li class="ui-screen-hidden"><a href="#">Infiniti</a></li> 
      <li class="ui-screen-hidden"><a href="#">Jeep</a></li> 
      <li class="ui-screen-hidden"><a href="#">Kia</a></li> 
      <li class="ui-screen-hidden"><a href="#">Lexus</a></li> 
      <li class="ui-screen-hidden"><a href="#">Mini</a></li> 
      <li class="ui-screen-hidden"><a href="#">Nissan</a></li> 
      <li class="ui-screen-hidden"><a href="#">Porsche</a></li> 
      <li class="ui-screen-hidden"><a href="#">Subaru</a></li> 
      <li class="ui-screen-hidden"><a href="#">Toyota</a></li> 
      <li class="ui-screen-hidden"><a href="#">Volkswagon</a></li> 
      <li class="ui-screen-hidden"><a href="#">Volvo</a></li> 
     </ul> 
    </div> 
</div> 

Answer 2

http://jsfiddle.net/ULXbb/48/

Ho attivato la funzionalità di selezione. Ora puoi selezionare elementi dalla lista. che viene quindi scritto nel campo di input e l'elenco viene reso nascosto.

Answer 3

Sembra che questa soluzione non funzioni più con JQuerymobile 1.1.0 e Jquery 1.7.2.

Le voci della lista non compaiono se non si preme Canc sulla tastiera Inoltre, non scompaiono quando deselezionando la casella di filtro ...

edit: ho trovato una grande soluzione per rendere il lavoro di completamento automatico su questo sito : http://www.andymatthews.net/read/2012/03/27/jQuery-Mobile-Autocomplete-now-available