目前我有一个apache wicket导航树，显示一个带有几个子节点的根节点和一个用于过滤树项的简单文本输入。
过滤后，通过添加css类隐藏不匹配的项目。这非常有效。
我在应用过滤器后将未隐藏的项目排序到顶部时遇到问题，所以在尝试和错误超过一个小时之后，我想：“让我们再次向StaggzOverflowz询问那些好心的人。”
更新：我发布了一个jsfiddle：http://jsfiddle.net/polzifer/ypu9K/
树看起来像这样：
<input type="text" id="filter"/>
<div class="navigation">
<wicket:panel>
-RootNode
-Child with a link inside
-Child with a link inside
-Child with a link inside
-...
</wicket:panel>
</div>
在那棵树之上，我有一个简单的文本输入，在“keyup”上用javascript过滤树：
function filterList(){
var count = 0;
/*
* for every link item in the navigation tree check, if they match the search entry
* and add the class ".hidden{ visibility: hidden;}" to it's enclosing parent
* element
*/
jQuery(".navigation a").each(function () {
if(jQuery(this).text().search(new RegExp(jQuery("#filter").val(),"i"))<0){
jQuery(this).parents(".wicket-tree-content").addClass("hidden");
}else{
jQuery(this).parents(".wicket-tree-content").removeClass("hidden");
count++;
}
});
//Detach children from the navigation, sort them and append them again
//(we have a <wicket:panel> element around the children)
jQuery('.navigation').children().children().detach().sort(
function(a,b) {
var condA = jQuery(a).hasClass("hidden");
var condB = jQuery(b).hasClass("hidden");
var result = 0;
if(condA == condB){
result = -1;
}
if(condA != condB){
result = 1;
}
return result;
}).appendTo(jQuery('.navigation').children());
}