CODEWITHSUNDEEP
jqueryjquery-mobile
Juan Pablo Gomez
Juan Pablo Gomez

Reputation: 5524

jquerymobile listview filter programmatically

I'm trying to accomplish this task.

I have two columns grid 

<div class="ui-grid-a">
    <div class="ui-block-a" style="width:35%">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button">A</a>
            <a href="#" data-role="button">B</a>
            <a href="#" data-role="button">C</a>
            <a href="#" data-role="button">D</a>
            <a href="#" data-role="button">E</a>
            <a href="#" data-role="button">F</a>
        </div>        
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button">G</a>
            <a href="#" data-role="button">H</a>
            <a href="#" data-role="button">I</a>
            <a href="#" data-role="button">J</a>
            <a href="#" data-role="button">K</a>
            <a href="#" data-role="button">L</a>
        </div> 
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button">M</a>
            <a href="#" data-role="button">N</a>
            <a href="#" data-role="button">Ñ</a>
            <a href="#" data-role="button">O</a>
            <a href="#" data-role="button">P</a>
            <a href="#" data-role="button">Q</a>
        </div> 
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button">R</a>
            <a href="#" data-role="button">S</a>
            <a href="#" data-role="button">T</a>
            <a href="#" data-role="button">U</a>
            <a href="#" data-role="button">V</a>
            <a href="#" data-role="button">W</a>
        </div>         
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button">X</a>
            <a href="#" data-role="button">Y</a>
            <a href="#" data-role="button">Z</a>
            <a href="#" data-role="button" onclick="buscar();">BUSCAR</a>
        </div>         
    </div>       
    <div class="ui-block-b" style="width:65%; top:0; position:relative;">
        <ul id ="milista" data-role="listview" data-filter="true" style="left:1em; width:95%; ">
            <li><a href="index.html">Acura</a></li>
            <li><a href="index.html">Audi</a></li>
            <li><a href="index.html">BMW</a></li>
            <li><a href="index.html">Cadillac</a></li>
            <li><a href="index.html">Chrysler</a></li>
            <li><a href="index.html">Dodge</a></li>
            <li><a href="index.html">Ferrari</a></li>
            <li><a href="index.html">Ford</a></li>
            <li><a href="index.html">GMC</a></li>
            <li><a href="index.html">Honda</a></li>
            <li><a href="index.html">Hyundai</a></li>
            <li><a href="index.html">Infiniti</a></li>
            <li><a href="index.html">Jeep</a></li>
            <li><a href="index.html">Kia</a></li>
            <li><a href="index.html">Lexus</a></li>
            <li><a href="index.html">Mini</a></li>
            <li><a href="index.html">Nissan</a></li>
            <li><a href="index.html">Porsche</a></li>
            <li><a href="index.html">Subaru</a></li>
            <li><a href="index.html">Toyota</a></li>
            <li><a href="index.html">Volkswagon</a></li>
            <li><a href="index.html">Volvo</a></li>
        </ul>        
    </div>
</div>

like shows at http://jsfiddle.net/jupagose/sugfP/, I want to programmatically filter the listview while the user type's on lefthand panel. I don't want to force the user to load OS keyboard.

It is possible with jquery?

Upvotes: 1

Views: 5642

Answers (3)

Moinkhan
Moinkhan

Reputation: 61

Richard's answer is perfect, but there's an update for JQM 1.4.

jquerymobile refiltering.

Just triggering "change" event wont filter the list. You would have to rather separetly call "filterable" widget and its "refresh" method

$(".listselector").filterable("refresh");

Upvotes: 1

ofumbi
ofumbi

Reputation: 363

If you have multiple inputs, using

ui-input-text

will select all of them. use this instead to only pick the filter

var filter_el = $("[data-type='search']");

Upvotes: 0

Richard A
Richard A

Reputation: 2100

There you go : 

  $("[data-role=button]").click(function(e){
        var filter_el = $(".ui-input-text");
        var filter_val = filter_el.val();
        var filter_query = filter_val+$(this).text();
        filter_el.val(filter_query);
        filter_el.trigger("change")
    });

Ideally, I would add a class to each button and use that class for the button click event e.g. $(".keyboard-btn").click ... the same goes for the filter.

Here's a fiddle: http://jsfiddle.net/sugfP/14/ ​

UPDATE:

Here's an example of using keyboard classes: http://jsfiddle.net/sugfP/15/

Upvotes: 4

Related Questions