Мобильный фильтр данных jQuery, в случае отсутствия результата - PullRequest
Новая
       19

Мобильный фильтр данных jQuery, в случае отсутствия результата

6 голосов
/ 13 марта 2012

В настоящее время я изучаю jQuery Mobile для разработки мобильной версии панели инструментов с информацией для отслеживания заказов.И план заключается в том, чтобы использовать простой неупорядоченный список со всеми заказами, и люди могут щелкнуть ссылку, о которой они хотят узнать больше.Поскольку этот список может стать довольно большим, приятно иметь возможность фильтрации, которую легко сделать с помощью jQuery Mobile.

Просто примерно так: 

<ul data-role="listview" data-filter="true">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul>

data-filter="true" позаботитсяотображения панели поиска, и она на самом деле работает довольно хорошо.

Но моя единственная проблема в том, что когда ничего не найдено, оно просто ничего не отображает, и я хотел бы, чтобы было немного текста, говорящего что-то вроде "Извините,заказы не найдены. "

Кто-нибудь знает, возможно ли это с jQuery Mobile, или это должно быть написано с нуля?

Ответы [ 3 ]

7 голосов
/ 13 марта 2012 
//wait to do event binding until the page is being initialized
$(document).delegate('[data-role="page"]', 'pageinit', function () {

    //cache the list-view element for later use
    var $listview = $(this).find('[data-role="listview"]');

    //delegate event binding since the search widget is added dynamically
    //bind to the `keyup` event so we can check the value of the input after the user types
    $(this).delegate('input[data-type="search"]', 'keyup', function () {

        //check to see if there are any visible list-items that are not the `#no-results` element
        if ($listview.children(':visible').not('#no-results').length === 0) {

            //if none are found then fadeIn the `#no-results` element
            $('#no-results').fadeIn(500);
        } else {

            //if results are found then fadeOut the `#no-results` element which has no effect if it's already hidden
            $('#no-results').fadeOut(250);
        }
    });
});​

Вот демоверсия: http://jsfiddle.net/6Vu4r/1/

2 голосов
/ 12 ноября 2012

Спасибо

Я использую этот код с расширением. Я не хочу писать каждый раз, когда # нет результата li. 

$(document).delegate('[data-role="page"]', 'pageinit', function() {

var $listview = $(this).find('[data-role="listview"]');
$listview.append('<li id="no-results" style="display:none;">[No results found]</li>');
$listview.listview('refresh');
$(this).delegate('input[data-type="search"]', 'keyup', function() {
    if ($listview.children(':visible').not('#no-results').length === 0) {
        $('#no-results').fadeIn(500);
    } else {
        $('#no-results').fadeOut(250);
    }
});
});
1 голос
/ 12 декабря 2013

Если вы используете код @ Jasper в списке с автоматическими разделителями, вы можете обнаружить, что скрытый элемент «без результатов» создает разделитель.Чтобы избежать этого, я использовал этот код: 

if ($listview.children(':visible').not('#no-results').length === 0) {

        // if none are found then fadeIn the `#no-results` element
        $('#no-results').fadeIn(500);

    } else {

        // if results are found then fadeOut the `#no-results` element which
        // has no effect if it's already hidden
        $('#no-results').fadeOut(250);
        $listview.children('.ui-li-divider:visible').not('#no-results').each(function()             {
            if($(this).next("#no-results").length > 0)
                $(this).hide();
        });
    }

Если у кого-то есть лучшее решение, пожалуйста, поделитесь.

...