Как запустить поиск списка jQueryMobile?

Question 1

Я работаю над списком, содержимое которого должно обновляться двумя разными способами: с помощью панели поиска и фильтра выбора.

Пока мне удалось обновить список в соответствии с одним из этих условий. Проблема в том, чтобы совместить оба этих варианта.

Вот пример:

[поиск: без строки] [выбор: без параметров]

яблоко
Банан
Фасоль
Морковь
Картошка

Представим, что пользователь сначала использует поле поиска. Содержимое Listview обновляется в соответствии со строкой поиска.

[поиск: "B"] [выбор: без вариантов]

Банан
Фасоль

Затем пользователь использует поле выбора. Список перестраивается в соответствии с выбранной опцией с меньшим набором элементов.

[поиск: "B"] [выберите: овощи]

Фасоль
Картошка

На этом этапе я хотел бы провести исследование, чтобы отфильтровать этот новый набор элементов с помощью строки поиска. Хотелось бы получить такой результат:

[поиск: "B"] [выберите: овощи]

Фасоль

Я искал в API jqueryMobile метод принудительного обновления процесса поиска, но безуспешно. Вы знаете, какую функцию мне следует использовать для запуска поиска?

listview search jquery-mobile filter

0

Yako 1 Апр 2013 в 18:18

Добавьте значения опций выбора - например, овощ - в основной массив. Затем сравните результаты поиска по списку и выберите значение параметра. что ты думаешь?

–

Omar

1 Апр 2013 в 18:52

Вы можете создать свои собственные критерии фильтрации, используя underscore.js, а затем передать результаты в listview

–

msapkal

2 Апр 2013 в 11:19

Answer

Проверь это. Надеюсь, это решение сработает для вас.

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>

1

msapkal 2 Апр 2013 в 15:03

Question 2

Проверь это. Надеюсь, это решение сработает для вас.

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>

1

msapkal 2 Апр 2013 в 15:03

Как запустить поиск списка jQueryMobile?

1 ответ

Похожие вопросы

Новые вопросы

listview