如何在 HTML 表单中添加 jstree 搜索插件

Question

我的 jstree 搜索插件在 HTML 页面中运行良好。树的数据通过ajax加载，并且通过ajax执行搜索。

一切都工作正常，直到我把它变成另一种形式。

如果我将相同的代码放入 HTML 表单中，它将不再起作用，因为不会执行搜索。

未执行搜索，因为当我单击插件的搜索按钮时会提交整个表单。

如何捕获搜索按钮的点击并阻止提交整个表单？

全局表单有自己的提交按钮，并且仍然可以正常工作。

我尝试了此线程中的解决方案，但它不起作用： http://groups.google.com/group/jstree/browse_thread/thread/7945aa59fca2d9c9

这也不起作用：

<form id="list" name="list" action="save.php" method="post">

    <!-- jstree button and input text for search plugin -->
    <div id="mmenu">
        <input type="submit" id="search" value="Go" />
        <input type="text" id="text" value=""  />
    </div>

    <!-- the tree container -->
    <div id="indexation" class="indexation"></div>

    <input id="url" type="text" name="url" value="" size="30" title="www.example.org"/>

    <input type="submit" name="sendform" value="Save" />
</form>

<script type="text/javascript">
// Code for the menu buttons
     $(document).ready(function(){

    $("#mmenu input").click(function () {
        switch(this.id) {
            case "add_default":
            case "add_folder":
                $("#indexation").jstree("create", null, "last", {
            "attr" : {
            "rel" : this.id.toString().replace("add_", "") }
                });
                break;
            case "search":
                $("#indexation").jstree("search", document.getElementById("text").value);
                break;
            case "text": break;
            default:
                $("#indexation").jstree(this.id);
            break;
        }
    });
});
</script>

任何想法/提示将不胜感激

这是 jsfiddle ：

http://jsfiddle.net/v9VRr/6/

谢谢，

Answer 1

我找到了一个解决方案，虽然不是很聪明，但至少有效。只需将搜索所需的 jstree html 放在表单元素之外：

<form id="list" name="list" action="save.php" method="post">

<!-- the tree container -->
<div id="indexation" class="indexation"></div>

<input id="url" type="text" name="url" value="" size="30" title="www.example.org"/>
<input type="submit" name="sendform" value="Save" />

<form>

<!-- jstree button and input text for search plugin -->
<div id="mmenu">
    <input type="submit" id="search" value="Go" />
    <input type="text" id="text" value=""  />
</div>

然后通过 CSS 将 div id="mmenu" 放置在您需要的位置。