1

这是 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 个条目）

4

1 回答 1

3

我刚刚检查了为我添加的 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');
});
于 2013-05-06T08:38:00.223 回答