添加动态数据时，jQuery Mobile 自动完成显示列表答案

【问题标题】：jQuery Mobile autocomplete displays the list when dynamic data is added添加动态数据时，jQuery Mobile 自动完成显示列表
【发布时间】：2013-04-26 15:07:31
【问题描述】：

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

【问题讨论】：

您想隐藏动态添加的项目？
是的，我想隐藏动态添加的列表视图项

标签： javascript jquery jquery-mobile autocomplete dynamic-data

【解决方案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');
});

【讨论】：