TypeError:$(...)。autocomplete不是函数,PHP自动完成文本框中的错误

时间:2016-02-10 09:01:53

标签: php jquery-autocomplete jquery-ui-autocomplete

<link rel="stylesheet" type="text/css" href="<?php echo base_url('media'); ?>/autocomplete/jquery-ui.css" />
<script type="text/javascript" src="<?php echo base_url(); ?>media/js/order_new/jquery-ui.js"></script>


<script>
  $(document).ready(function() {
    // alert("hii");
    $('#other').autocomplete({
      source: '<?php echo base_url('
      index.php ') ?>/frontend/location_autocomplete'
    });
  });
</script>



<input type="text" id="other" name="other" value="" placeholder="what your looking for?" class=" new_search" data-provide="typeahead" data-items="4" data-source='[]'>

2 个答案:

答案 0 :(得分:0)

您收到此错误是因为您尚未加载jquery。您的应用程序找不到对jquery($)的引用。在将jquery-ui提取到应用程序之前,在脚本资源中包含jquery。

答案 1 :(得分:0)

检查路径(/)和库(jquery + jquery-ui)之间的差异:

<?php
    echo '<link rel="stylesheet" type="text/css" href="' . base_url('media') . '/autocomplete/jquery-ui.css"/>';
    echo '<script type="text/javascript" src="' . base_url() . '/media/js/order_new/jquery.js"></script>';
    echo '<script type="text/javascript" src="' . base_url() . '/media/js/order_new/jquery-ui.js"></script>';
?>

通过开发人员工具栏检查您的路径是否存在。

来自Autocomplete | jQuery UIhttps://jqueryui.com/autocomplete/)的演示:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Autocomplete - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script>
            $(function() {
                var availableTags = [
                    "ActionScript",
                    "AppleScript",
                    "Asp",
                    "BASIC",
                    "C",
                    "C++"
                ];
                $( "#tags" ).autocomplete({
                    source: availableTags
                });
            });
        </script>
    </head>
    <body>
        <div class="ui-widget">
            <label for="tags">Tags: </label>
            <input id="tags">
        </div>
    </body>
</html>