将 jquery 自动完成代码片段移动到 script.js 文件答案

【问题标题】：moving jquery autocomplete code snippet to script.js file将 jquery 自动完成代码片段移动到 script.js 文件
【发布时间】：2012-08-20 18:10:08
【问题描述】：

我试图通过将我的 jquery 自动完成代码移动到 scripts.js 文件来保持 DRY 原则，但是当我移动它时我无法让自动完成功能工作。

这是它目前的设置方式。

添加表单

    <head>
    <?php
     require_once ('includes/connect-db.php');
     require_once ('includes/functions.php');
    ?>
        <link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="includes/js/jquery-ui-1.8.21.custom.min.js"></script>
        <script type="text/javascript">


        $('document').ready(function() {
            $('#datepickerID').datepicker({
                changeYear:true,
                changeMonth:true,
                dateFormat:'yy-mm-dd'
            })

        <?php $productArray = autoComplete();?>

        $(function() {

                var js_products_array = <?php echo json_encode($productArray); ?>;

                $( "#autocompleteID" ).autocomplete({
                    source: js_products_array
                 });
            });

        });

        </script>
</head>

如果在 javascript 中嵌入了 php 代码，我不确定如何在 addForm.php 和 scripts.js 之间工作，如果这有意义的话。

【问题讨论】：

这和 MySQL 有什么关系？

标签： php javascript autocomplete

【解决方案1】：

您必须将js_products_array 保留在.js 文件之外，因为它包含来自PHP 脚本的数据，并在准备好文档时初始化autocomplete()。

所以你只能保留

<?php $productArray = autoComplete();?>
<script type="text/javascript">
    var js_products_array = <?php echo json_encode($productArray); ?>;
</script>

您可以在file.js 中添加

 $('document').ready(function() {
     $('#datepickerID').datepicker({
           changeYear:true,
           changeMonth:true,
           dateFormat:'yy-mm-dd'
     })

     $( "#autocompleteID" ).autocomplete({
           source: js_products_array
     });
 });

【讨论】：

谢谢。如果不可能，我将把它添加到每个文件 editForm.php、searchForm.php 等中。我认为如果我将代码放在一起，我会保持可读性，但我很想知道将其拆分的最佳实践像上面那样？谢谢。
你也可以把 javascript 文件变成一个 php 文件，然后只打印出像 <script type="text/javascript" src="main.php"></script>这样的 javascript 数据