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”放在你需要的地方。

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

1 个答案: