Javascript Jquery移动数据过滤器固定位置/静态

我使用的是一个列表视图，在ul中有一个数据过滤器和一个长列表

我的问题是，当我向下滚动时，数据过滤器搜索消失

不管怎么说，我可以让它一直可见吗

例如：

<ul data-role="listview" data-filter="true">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Acura2</a></li>
<li><a href="index.html">Acura3</a></li>
<li><a href="index.html">Acura4</a></li>
</ul>

您可以自定义搜索过滤器元素的CSS，使其在视口中固定

#my-wrapper {
    padding-top : 45px;
}
#my-wrapper form {
    position : fixed;
    top      : 15px;
    left     : 15px;
    width    : 100%;
    z-index  : 1;
}​

您会注意到

#my wrapper

选择器，我使用它只针对特定listview小部件的搜索输入。我的HTML如下所示：

    <div id="my-wrapper">
        <ul data-filter="true" data-role="listview">
            ...
        </ul>
    </div>

...

使用这样的包装器将listview小部件的搜索输入放在包装器中，因此我们可以使用该包装器来定位正确的搜索输入。默认情况下，jQuery Mobile将带有搜索输入的表单作为listview小部件的前一个同级放置在DOM中

下面是一个演示：