我有一个表，我想使用 JQM 1.4 中的新可过滤小部件进行过滤。表的每个单元格都包含一个输入，我用它来更新数据库的“更改”。
我为每个元素添加了 data-filtertext 属性，但过滤器似乎只对第一行起作用（在过滤器输入中输入了多个字母后，没有返回行）。
我试图附加一个自定义过滤器，但我一定做错了......因为它不会触发。
有些输入是空的，所以我删除了 data-filtertext='' 属性，但这没有帮助。
这是我的测试代码：
<html>
<head>
<title>Test Table Filter</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"> </script>
</head>
<body>
<div data-role='page'>
<div data-role='content'>
<form>
<input id="venue_filterTable-input" data-type="search" />
</form>
<table id='venueTable' class='ui-responsive' data-role='table' data-filter='true' data-input='#venue_filterTable-input'
cellpadding='15' cellspacing='1'>
<thead>
<tr>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Club Name</th>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Contact</th>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Phone</th>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>City</th>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Last Called</th>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Next Call</th>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Notes</th>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Assigned To</th>
</tr>
</thead>
<tbody>
<tr>
<td data-filtertext='Fiddle Dee Dee'>
<input name="club_name" class='venue_input' value="Fiddle Dee Dee" placeholder="Club Name" data-idvenue='63' />
</td>
<td>
<input name="contact" class='venue_input' value="" placeholder="Contact" data-idvenue='63' />
</td>
<td data-filtertext='2535551213'>
<input name="phone" class="venue_input phone" value="2535551213" placeholder="Phone" data-idvenue='63' />
</td>
<td data-filtertext='Auburn'>
<input name="city" class='venue_input' value="Auburn" placeholder="City" data-idvenue='63' />
</td>
<td data-filtertext='2013-12-02'>
<input name="last_called" class='date venue_input' value="2013-12-02" placeholder="Last Called"
data-idvenue='63' />
</td>
<td data-filtertext='2014-01-02'>
<input name="next_call" class='date venue_input' value="2014-01-02" placeholder="Next Call" data-idvenue='63' />
</td>
<td data-filtertext='fiddle dee dee'>
<textarea name="notes" class='venue_input' placeholder="Notes" data-idvenue='63'>fiddle dee dee</textarea>
</td>
<td data-filtertext='Jojo'>
<input name="assigned_to" class='venue_input' value="Jojo" placeholder="Assigned To" data-idvenue='63' />
</td>
</tr>
<tr>
<td data-filtertext='Satellite'>
<input name="club_name" class='venue_input' value="Satellite" placeholder="Club Name" data-idvenue='61' />
</td>
<td ">
<input name="contact" class='venue_input' value="" placeholder="Contact" data-idvenue='61' />
</td>
<td data-filtertext='3605551212'>
<input name="phone" class="venue_input phone" value="3605551212" placeholder="Phone" data-idvenue='61' />
</td>
<td data-filtertext='Bremerton'>
<input name="city" class='venue_input' value="Bremerton" placeholder="City" data-idvenue='61' />
</td>
<td data-filtertext='2013-12-03'>
<input name="last_called" class='date venue_input' value="2013-12-03" placeholder="Last Called"
data-idvenue='61' />
</td>
<td data-filtertext='2014-01-03'>
<input name="next_call" class='date venue_input' value="2014-01-03" placeholder="Next Call" data-idvenue='61' />
</td>
<td ">
<textarea name="notes" class='venue_input' placeholder="Notes" data-idvenue='61'></textarea>
</td>
<td data-filtertext='agency'>
<input name="assigned_to" class='venue_input' value="agency" placeholder="Assigned To" data-idvenue='61' />
</td>
</tr>
<tr>
<td data-filtertext='Here In My Soup'>
<input name="club_name" class='venue_input' value="Here In My Soup" placeholder="Club Name" data-idvenue='62' />
</td>
<td ">
<input name="contact" class='venue_input' value="" placeholder="Contact" data-idvenue='62' />
</td>
<td data-filtertext='2535551212'>
<input name="phone" class="venue_input phone" value="2535551212" placeholder="Phone" data-idvenue='62' />
</td>
<td data-filtertext='Federal Way'>
<input name="city" class='venue_input' value="Federal Way" placeholder="City" data-idvenue='62' />
</td>
<td data-filtertext='2013-12-04'>
<input name="last_called" class='date venue_input' value="2013-12-04" placeholder="Last Called"
data-idvenue='62' />
</td>
<td data-filtertext='2014-01-06'>
<input name="next_call" class='date venue_input' value="2014-01-06" placeholder="Next Call" data-idvenue='62' />
</td>
<td data-filtertext='four piece or less; pays in scrapple'>
<textarea name="notes" class='venue_input' placeholder="Notes" data-idvenue='62'>four piece or less; pays in
scrapple</textarea>
</td>
<td ">
<input name="assigned_to" class='venue_input' value="" placeholder="Assigned To" data-idvenue='62' />
</td>
</tr>
</tbody>
</table>
</div>
<script>
$.mobile.document.one( "filterablecreate", "#venue_filterTable-input", function() {
$( "#venue_filterTable-input" ).filterable( "option", "filterCallback",
function( index,searchValue ) {
// custom filtering logic
alert($(this).find('input').val() );
});
});
</script>
</div>
</body>
</html>
那么：如何让可过滤小部件根据每个内部输入的内容进行过滤<td>？数据过滤器文本应该放在<td>还是输入标签中？（似乎都不适合我）。附加自定义过滤器时，id应该是过滤器搜索输入的id，还是表格，还是......什么？
这是该页面的链接：http: //bandorama.us/test.html
如果您在搜索输入中键入 F，则会显示两行（均包含字母“f”）。如果您键入更多字符，则不会返回任何行。