Jquery mobile 更改jQuery移动筛选器列表输入字段的位置
Im使用jQuery移动筛选器列表: 是否可以移动输入字段的位置,以便我可以将其放入页面上已经存在的div中Jquery mobile 更改jQuery移动筛选器列表输入字段的位置,jquery-mobile,Jquery Mobile,Im使用jQuery移动筛选器列表: 是否可以移动输入字段的位置,以便我可以将其放入页面上已经存在的div中 使用jQuery的appendTo似乎可以很好地工作,但这是一种黑客解决方案。谢谢这是我在寻找类似问题的解决方案时发现的 HTML代码示例: <div data-role="page" id="page-id"> <div data-role="content"> <div data-role="fieldcontain">
使用jQuery的appendTo似乎可以很好地工作,但这是一种黑客解决方案。谢谢这是我在寻找类似问题的解决方案时发现的 HTML代码示例:
<div data-role="page" id="page-id">
<div data-role="content">
<div data-role="fieldcontain">
<input type="search" name="password" id="search" value="" />
</div>
<div class="filter-div" data-filter="one">1</div>
<div class="filter-div" data-filter="two">2</div>
<div class="filter-div" data-filter="three">3</div>
<div class="filter-div" data-filter="four">4</div>
<div class="filter-div" data-filter="five">5</div>
</div>
</div>
$(document).delegate('#page-id', 'pageinit', function () {
var $filterDivs = $('.filter-div');
$('#search').bind('keyup change', function () {
if (this.value == '') {
$filterDivs.slideDown(500);
} else {
var regxp = new RegExp(this.value),
$show = $filterDivs.filter(function () {
return ($(this).attr('data-filter').search(regxp) > -1);
});
$filterDivs.not($show).slideUp(500);
$show.slideDown(500);
}
});
});
通过这种方式,您可以将输入文本框放置在页面上的任何位置,它应该可以正确过滤您想要的项目列表
JSFIDLE演示: