Question

如何在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>

提前致谢。

Answer 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

Answer 2

您应该使用script标记来引用此JS文件，并将其添加到HTML中的head部分：

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

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

<强>更新

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

Answer 3

如果您愿意使用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>

Answer 4

您应该使用script代码

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

将一个javascript插件插入index.php

4 个答案: