Question

我正在尝试制作搜索列表视图项目。

问题是当结果没有找到任何项目时，我想显示一条消息，例如“找不到结果”......

所以我在这里搜索了一个例子http://jsfiddle.net/6Vu4r/1/，但它对我的JQM版本1.4.2不起作用...

我该怎么做？请帮忙〜

这是我的代码

 <ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
            <li><a href="#">Apple</a></li>
            <li><a href="#">Banana</a></li>
            <li><a href="#">Cherry</a></li>
            <li><a href="#">Cranberry</a></li>
            <li><a href="#">Grape</a></li>
            <li><a href="#">Orange</a></li> 
        </ul>

Answer 1

JQM版本1.4.2增加了＆＃34; ui-screen-hidden＆＃34;列表中每个li项的类。这就是为什么即使执行fadeOut函数它仍保持隐藏的原因。逻辑是正确的，但它被这个类覆盖了。一个快速且经过测试的解决方案是使用！important来强制实现它的可见性。

$(document).delegate('[data-role="page"]', 'pageinit', function () {
var $listview = $(this).find('[data-role="listview"]');
  $(this).delegate('input[data-type="search"]', 'keyup', function () {
    if ($listview.children(':visible').not('#no-results').length === 0) {
        $('#no-results').attr("style","display:block !important");
    } else {
        $('#no-results').attr("style","display:none !important");
    }
  });
});

注意我使用了.attr函数并明确添加了＆＃34;样式＆＃34;属性而不是使用jquery css函数，因为.css jquery函数不喜欢！重要的是由于某些原因。

您可能遇到的另一个问题是＆＃34;没有结果＆＃34;有结果时显示消息。这将是由于过滤过程中实施的延迟。当有数千个要搜索的项目时，此延迟可保护性能。

您必须使用延迟进程包装if语句。例如setTimeout或延迟插件，如http://www.theloveofcode.com/jquery/delayed/

  $(this).delegate('input[data-type="search"]', 'keyup', function () {
    setTimeout(function(){
    if ($listview.children(':visible').not('#no-results').length === 0) {
        $('#no-results').attr("style","display:block !important");
    } else {
        $('#no-results').attr("style","display:none !important");
    }
    }, 1000);
});

祝你好运

jquery mobile listview如果没有结果

1 个答案: