将 javascript 插件插入 index.php [关闭]答案

【问题标题】：Insert a javascript plugin into index.php [closed]将 javascript 插件插入 index.php [关闭]
【发布时间】：2013-12-29 15:35:30
【问题描述】：

如何在 index.php 中插入 javascript 插件？

我尝试包含typeahead.js，但没有成功。

我需要包含整个文件夹还是应该只包含 typeahead.js 文件？

javascript 插件链接：http://plugins.jquery.com/typeahead.js/

这是我当前的 index.php 代码：

<?php
include 'script_suggestion.php';
include 'script_close_suggestion_box.php';
?>
<html>
    <head>
        <title>
            Brandon's Search Engine
        </title>
        <style type="text/css">
            #suggestion {
                border: 1px solid black;
                visibility: hidden;
                position: relative;
                background-color: white;
                z-index: 10;
            }
            #suggestion a {
                font-size: 12pt;
                color: black;
                text-decoration: none;
                display: block;
                width: 648px;
                height: auto;
                text-align: left;
                padding: 2px;
            }
            #suggestion a:hover {
                background-color: #dddddd;
                width: 644px;
                padding: 2px;
            }
        </style>
    </head>
    <body>
        <form method="GET" action="search.php" name="q">
            <table align="center">
                <tr>
                    <td>
                        <h1><center>Brandon's Search Engine</center></h1>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="text" name="q" id="q" style="height: 27px; width: 650px; padding: 2px" placeholder="Search Now"
                               onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="closeBox()"/>

                        <script>document.getElementById('q').focus()</script>

                        <div id="suggestion" style="width: 648px">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
                        <input type="reset" value="Clear" onclick="closeBox()" style="height: auto; width: 50px; padding: 2px" />
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        Can't find your site? <br /> Insert <a href="insert.php">here</a>.
                    </td>
                </tr>
            </table>
            <input type="hidden" name="page" value="1" />
        </form>
    </body>
</html>

提前致谢。

【问题讨论】：

您是否单击了“阅读文档”链接？它详细说明了如何使用它。您需要在页面上包含一些基本的 JS。
script_suggestion.php的内容是什么？是否包含 jQuery 库？
你看到文档了吗：github.com/twitter/typeahead.js
@AwladLiton 他使用的是 jQuery 插件，而不是 Twitter 的 TypeHead...plugins.jquery.com/typeahead.js
我不确定我是否包含，script_suggestion.php 的链接：link

标签： javascript php jquery jquery-plugins

【解决方案1】：

http://plugins.jquery.com/typeahead.js/ 是一个 jQuery 插件，因此您需要先包含 jQuery，然后再包含该脚本。您在 </body> 之前执行此操作，因为脚本需要加载 DOM。

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="typeahead.js" type="text/javascript"></script>
    </body>
</html>

但这还不是全部。您还需要按照文档中的说明使用脚本。

您可以将此代码放在页面中：

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="typeahead.js" type="text/javascript"></script>
        <script>
$(function(){
       $('#q').typeahead({
          name: 'accounts',
          local: ['timtrueman', 'JakeHarding', 'vskarich']
        });
});
        </script>
    </body>
</html>

或在您自己的文件中：

scripts.js

$(function(){
       $('#q').typeahead({
          name: 'accounts',
          local: ['timtrueman', 'JakeHarding', 'vskarich']
        });
});

并将其包含在库之后。

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="typeahead.js" type="text/javascript"></script>
        <script src="scripts.js" type="text/javascript"></script>
    </body>
</html>

请注意，您需要阅读并理解这些文档才能在您自己的应用程序中使用。

他们在这里https://github.com/twitter/typeahead.js

【讨论】：

【解决方案2】：

如果你愿意js文件，那么你应该使用

    <script src="http://plugins.jquery.com/typeahead.js"></script>

完整的 index.php

<?php
    include 'script_suggestion.php';
    include 'script_close_suggestion_box.php';
    ?>
    <html>
        <head>
            <title>
                Brandon's Search Engine
            </title>
    <script src="http://plugins.jquery.com/typeahead.js"></script>
            <style type="text/css">
                #suggestion {
                    border: 1px solid black;
                    visibility: hidden;
                    position: relative;
                    background-color: white;
                    z-index: 10;
                }
                #suggestion a {
                    font-size: 12pt;
                    color: black;
                    text-decoration: none;
                    display: block;
                    width: 648px;
                    height: auto;
                    text-align: left;
                    padding: 2px;
                }
                #suggestion a:hover {
                    background-color: #dddddd;
                    width: 644px;
                    padding: 2px;
                }
            </style>
        </head>
        <body>
            <form method="GET" action="search.php" name="q">
                <table align="center">
                    <tr>
                        <td>
                            <h1><center>Brandon's Search Engine</center></h1>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <input type="text" name="q" id="q" style="height: 27px; width: 650px; padding: 2px" placeholder="Search Now"
                                   onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="closeBox()"/>

                            <script>document.getElementById('q').focus()</script>

                            <div id="suggestion" style="width: 648px">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <input type="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
                            <input type="reset" value="Clear" onclick="closeBox()" style="height: auto; width: 50px; padding: 2px" />
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            Can't find your site? <br /> Insert <a href="insert.php">here</a>.
                        </td>
                    </tr>
                </table>
                <input type="hidden" name="page" value="1" />
            </form>
        </body>
    </html>

【讨论】：

-1。他也需要包含 jQuery。
+1，留下评论或编辑，而不是投反对票
@popnoodles 我确实发表了评论...
而不是投反对票

【解决方案3】：

你应该使用script标签

<script type="text/javascript" src="typeahead.js"/>

【讨论】：

在哪些具体情况下可以自行关闭脚本标签？

【解决方案4】：

你应该使用script标签来引用这个JS文件，将它添加到你的HTML中的head部分：

<head>
    <script src="typeahead.js" type="text/javascript"></script>
</head>

.js 文件可能位于您的服务器或任何其他服务器上，您只需在 SRC 属性中指定正确的 URL。

更新：

正如@BenM 建议的那样，您最好在</body> 结束标记之前立即找到此脚本引用，以避免DOM 加载延迟。

【讨论】：

为什么要在head中添加脚本？最好放在</body>之前...
@BenM 如果代码需要加载 DOM，那就是真的。
这是一个jquery插件，如OP的问题所示，所以它确实需要加载DOM
是否需要加载DOM没关系。这就是 $(function() { }) 包装器的用途。此外，它是一个 jQuery 插件也无关紧要。几乎总是最好将 Javascript 放在文档末尾以延迟 DOM 的加载。
@popnoodles 你不是认真的吧？