Question

我正在努力完成这项任务。

我有两列网格

<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>

就像http://jsfiddle.net/jupagose/sugfP/的节目一样，我希望以编程方式过滤listview，同时用户在左侧面板上输入。我不想强迫用户加载OS键盘。

有可能用jquery吗？

Answer 1

你去了：

  $("[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")
    });

理想情况下，我会为每个按钮添加一个类，并将该类用于按钮单击事件例如$(".keyboard-btn").click ...过滤器也是如此。

这是一个小提琴： http://jsfiddle.net/sugfP/14/

<强>更新

以下是使用键盘类的示例： http://jsfiddle.net/sugfP/15/

Answer 2

理查德的答案很完美，但JQM 1.4有更新。

jquerymobile refiltering

只是触发“更改”事件不会过滤列表。你不得不宁愿调用“可过滤”小部件及其“刷新”方法

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

Answer 3

如果您有多个输入，请使用

ui-input-text

将选择所有这些。使用它来代替只选择过滤器

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

以编程方式jquerymobile listview过滤器

3 个答案: