Filtry jQuery Mobile zachowują się jak autouzupełnianie

Question

Przeglądarka list i filtr wyszukiwania jQuery Mobile działa i wygląda świetnie. Chciałbym jednak zmienić zachowanie tak, aby zachowywało się bardziej jak kontrola automatycznego uzupełniania, tzn. Elementy listy pojawiają się dopiero po wprowadzeniu filtru wyszukiwania.

Widziałem inne osoby korzystające z autouzupełniania interfejsu jQuery UI, ale wydaje się, że przesadą jest włączenie tej biblioteki i dodatkowej pracy nad stylem wyników.

Czy można to zrobić z jQuery Mobile 1.0?

Answer 1

Można spróbować coś takiego

• http://jsfiddle.net/ULXbb/3/
• http://jsfiddle.net/ULXbb/5/ (Przycisk click)

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 (należy dodać atrybut class siebie <li> element 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/

mam włączone jego funkcjonalność selekcji. Teraz możesz wybrać elementy z listy. który jest następnie zapisywany w polu wejściowym, a lista jest ukrywana.

Answer 3

Wygląda na to, że to rozwiązanie nie działa już z JQuerymobile 1.1.0 i Jquery 1.7.2.

Wpisy z listy nie pojawia się, jeśli po naciśnięciu Delete na klawiaturze ani nie znikają podczas usuwania obudowę filtra ...

edit: znalazłem doskonałe rozwiązanie, aby autouzupełniania pracę na tej stronie : http://www.andymatthews.net/read/2012/03/27/jQuery-Mobile-Autocomplete-now-available