没有自动过滤器的jquery移动搜索
Posted
技术标签:
【中文标题】没有自动过滤器的jquery移动搜索【英文标题】：jquery mobile search without auto filter 【发布时间】：2015-07-20 02:39:42 【问题描述】：我的 jquery 移动站点中有一个搜索过滤器。默认情况下，当我输入搜索关键字时，搜索过滤器会自动过滤列表。但我需要它在按 Enter 键后过滤列表。`
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h2>My Phonebook</h2>
<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Albert</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Chloe</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Diana</a></li>
<li><a href="#">Gabriel</a></li>
<li><a href="#">Glen</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valarie</a></li>
</ul>
</div>
</div>
</body>
</html>
`
【问题讨论】：
【参考方案1】：您可以通过让自定义代码响应 filterablebeforefilter 事件并在那里使用 preventDefault 来禁用过滤。知道是否取消过滤的一种方法可能是始终阻止，除非刚刚按下回车键。
var blockNextFilter = true;
$("#myFilter").keyup(function(e)
// respond to enter key only
if (e.keyCode == 13)
blockNextFilter = false;
// trigger a change event to force the filter code to trigger
$("#myFilter").change();
);
$("ul").on("filterablebeforefilter", function( e, data )
// disable auto-filtering
if (blockNextFilter)
e.preventDefault();
// except when we're told so
else
blockNextFilter = true;
);
JSFiddle here
【讨论】：
老兄......它工作正常......谢谢......快速响应......在此之前我搜索了很多......无论如何谢谢......以上是关于没有自动过滤器的jquery移动搜索的主要内容，如果未能解决你的问题，请参考以下文章