Jquery mobile Data-Filter Fixed position/Static

Question

I am using a listview with a data-filter in the ul and a long list.

My problem is that when I scroll down the data-filter search disappears.

It there anyway I could make it so it's always visible?

Example:

<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>

Answer 1

You can customize the search-filter-element's CSS so it is fixed in the viewport.

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

You'll notice the #my-wrapper selector, I used it to be able to target just the search-input for a specific listview widget. My HTML looks like this:

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

Using a wrapper like this places the search-input for the listview widget inside the wrapper, so we can use that wrapper to target the proper search-input. By default jQuery Mobile places the form with the search-input in the DOM as the previous sibling of the listview widget.

Here is a demo: http://jsfiddle.net/vmndx/