Twitter bootstrap 如何在引导容器中移动dataTables搜索框？包括JSFiddle

我想将搜索框移到引导容器中。它在容器外部工作，但不在容器内部工作。看看JSFIDLE：

Search（工作！）：
在容器内搜索（失败）：

由于ID重复，该示例不起作用。看

jquery调用

$("#searchbox").keyup(function() { ... })

实际上，将函数作为keyup事件处理程序绑定到id为searchbox的第一个元素

删除具有searchbox id的其他元素，或将searchbox转换为类，并更新jquery选择器以按类选择元素：

标记：

---

用类声明一个跨度

<span id="searchFilter"></span>

---

这会成功的。试试谢谢。

Rpiechura在这里回答了这个问题：“不能有多个ID相同的项目。Jquery将只返回第一个匹配的项目，因此，由于您有3个ID相同的项目，因此它找到了第一个可用的项目并返回了它。如果您将它们重命名为Searchbox 1、2和3，则筛选器将使用所有3个项目（显然在更改了选择器之后）“.现在一切都正常了；）好吧，回答太晚了：）因为这是我的第一个答案，所以键入它的时间比我预期的要长。。。

...
Search (works!) : <input type="text" class="searchbox">
<div class="container">
Search inside container (fail): <input type="text" class="searchbox">
...

...
$(".searchbox").keyup(function() {
...

<span id="searchFilter"></span>

$('div.dataTables_filter').appendTo(".searchField");