How to change the position of JQuery Mobile List Filter (Input)

Question

I'm using the jQUery Mobile List control along with its filter functionality. By default jQuery mobile prepends the search input above the list ul. I want to change the location of this input? I've been searching on the google but no luck on this. I have also gone through the jQuery docs also.

Answer 1

Here's a working example: http://jsfiddle.net/Gajotres/V3CYc/

Because search form is not part of a listvew jQuery is needed for this change.

HTML :

<ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." id="custom-listview">
    <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>

CSS :

.ui-listview-filter {
    margin: 15px -15px 15px !important;
}

Javascript :

$(document).on('pagebeforeshow', '#index', function(){ 
    var filter = $('#custom-listview').prev();
    $('#custom-listview').parent().append(filter);
});