0

我正在开发一个列表视图，其内容应该通过两种不同的方式更新：搜索栏和选择选项过滤器。

到目前为止，我设法根据这些条件之一刷新了列表视图。问题是将这两个选项结合起来。

这是一个例子：

[搜索：无字符串] [选择：无选项]

  • 苹果
  • 香蕉
  • 豆子
  • 胡萝卜
  • 土豆

让我们假设用户首先使用搜索框。Listview 内容根据搜索字符串进行更新。

[搜索：“B”] [选择：无选项]

  • 香蕉
  • 豆子

然后，用户使用选择框。列表视图将根据所选选项重建，并包含一组较小的项目。

[搜索：“B”] [选择：蔬菜]

  • 豆子
  • 土豆

在这一点上，我想强制进行研究，以便使用搜索字符串过滤这组较新的项目。我本来希望得到这个结果：

[搜索：“B”] [选择：蔬菜]

  • 豆子

我在 jqueryMobile API 中搜索了一种强制搜索更新过程的方法，但没有成功。你知道我应该用来触发搜索的功能吗？

4

1 回答 1

1

看一下这个。希望这个解决方案对你有用。

http://jsfiddle.net/dxS8f/

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>

$(document).bind('pageinit', function() {

    var listJSON = [
        { item : 'Apple',       category : 'Fruites'},
        { item : 'Banana',      category : 'Fruites'},
        { item : 'Beans',       category : 'Vegetables'},
        { item : 'Carrot',      category : 'Vegetables'},
        { item : 'Potatoes',    category : 'Vegetables'},
        { item : 'Spinach',     category : 'Vegetables'},
        { item : 'Strawberry',  category : 'Fruites'}
    ];

    $.each(listJSON, function(i, field){
        $('#mylist').append('<li>'+field.item+'</li>').listview('refresh');
    });

    var yourFilterFunction = function( text, searchValue, item ){
        var flag = false,
            sCat = null;
            categoryVal =  $("#optCategory").val().toLowerCase();

        $.each(listJSON, function(i, field) {
            if(field.item === text) {
                sCat = field.category;
            }
        });

        flag = (text.toString().toLowerCase().indexOf(searchValue) > -1) && ((sCat.toLowerCase() === categoryVal || categoryVal === ''));
        return !flag;
    };

    $("#mylist").listview('option', 'filterCallback', yourFilterFunction);

    $("#optCategory").bind('change', function() {
        var inputTxt = $("input.ui-input-text").val();
        $(".ui-input-text").trigger("keyup");
        $.each(listJSON, function(i, field) {
            yourFilterFunction(field.item, inputTxt, $("#mylist").children().eq(i));
        });
    });

});

</script>
</head>
<body>
    <div data-role="page" id="HelloPage">   
        <header data-role="header" class="header">
            <a href="#" data-rel="back">Back</a>
            <h5>jQuery Mobile</h5>
        </header>
        <div data-role="content">
            <select id="optCategory" data-mini="true">
                <option value="" >Select One</option>
                <option value="Fruites">Fruites</option>
                <option value="Vegetables">Vegetables</option>
            </select>
            <br/>
           <ul id="mylist" data-role="listview" data-inset="true" data-filter="true">
           </ul>
        </div>
        <footer data-role="footer" data-position="fixed"><h5>&copy; All rights reserved</h5></footer>
    </div>
</body>
</html>
于 2013-04-02T11:03:08.393 回答