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

时间:2012-08-20 10:04:25

标签: php javascript autocomplete

我试图通过将我的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之间使用它。

1 个答案:

答案 0 :(得分: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
     });
 });