Question

这是jQuery Mobile演示页面上显示的自动完成示例

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <script>

    </script>
</head> 

<body> 
<div data-role="page" style="max-height:240px; min-height:240px;">
    <div data-role="content" > 
        <ul data-role="listview" data-filter="true" data-filter-reveal="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>
    </div>
</div>
</body>
</html>

这非常有效。如果我现在添加一个新的列表项，则显示该项而不是隐藏。所以我有一个文本输入框和一个包含一个项目的列表视图（我添加的新项目）。

以下是我添加的代码

$(document).ready(function(){
    $('ul').append('<li><a href="index.html">Sample</a></li>');
    $('ul').listview('refresh');
});

执行搜索并清除文本输入字段后，隐藏新添加的项目。如何确保用户永远不会看到动态添加的数据。（在我的情况下大约有50个条目）

Answer 1

我刚检查了为我正在添加的LI项目生成的HTML代码，我看到LI没有为它设置类 ui-screen-hidden 类。所有其他LI项目都有此设置。

所以我修改了这里显示的代码

$(document).ready(function(){
  $('ul').append('<li class="ui-screen-hidden"><a href="#">Sample</a></li>');
  $('ul').listview('refresh');
});

jQuery Mobile自动完成功能会在添加动态数据时显示列表

1 个答案: