如何更改 JQuery Mobile 列表过滤器的位置（输入）

Question

我正在使用 jQUery Mobile List 控件及其过滤器功能。默认情况下，jQuery mobile 在list ul 上方添加搜索输入。我想更改此输入的位置？我一直在谷歌上搜索，但没有运气。我也浏览了 jQuery 文档。

Answer 1

这是一个工作示例：http://jsfiddle.net/Gajotres/V3CYc/

因为搜索表单不是列表的一部分，所以此更改需要 jQuery。

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);
});