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

【问题标题】：How to add jstree search plugin inside a HTML form如何在 HTML 表单中添加 jstree 搜索插件
【发布时间】：2012-01-09 04:15:20
【问题描述】：

我的 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/

谢谢你，

【问题讨论】：

您能提供使用 jsfiddle.net 的示例吗？
感谢您的关注我用链接编辑了帖子
我在你的 jsfiddle 中看不到 jsTree....
对不起 :-( 我只是不知道如何在 jsfiddle 中添加它......树本身可以工作并且是从一些 json 数据创建的。数据来自 server.php 文件通过ajax. 树出现在
您可以在 jsfiddle 中添加一些示例数据。我不明白你真正想要什么。 jsfiddle 将帮助我明白这一点。搜索是做什么的？ jstree还是服务器？

标签： javascript jquery jstree

【解决方案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" 放置在您需要的位置。

【讨论】：