Javascript：未捕获的类型错误自动完成不是功能

Question

I'm aware that this question has been posted a lot as I have been going through every answer trying to find a solution but it has not worked for my code.

I'm trying to call the autocomplete function using jquery-ui on my search bar, but every time I load the page I get the type error saying autocomplete is not a function.

I've removed every instance of loading the javascript ui and placed it in a seperate file in my javascript folder called "jquery-ui-src.php", which looks like this

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

which is then called in files that need to use the jquery-ui. The file where the error is being caught I think is in my "header.php" file that acts as a header for the whole site

<?php
    session_start();
    include("assets/js/jquery-ui-src.php");
 ?> 
<header id="header" class="website-header">

//other code included here

//code for the search bar

<form role="search" action="<?php echo SITE_URL; ?>search" method="GET" style="width: 12em; margin: 0.1em 2em;margin-left:7em">
    <div class="input-group">
        <input type="text" id="tags" class="search-field form-control">
        <div class="input-group-btn">
            <button type="submit" class="btn btn-default">Search</button>
        </div>
    </div>
</form>
</div>

//other code included here




<script>
$(document).ready(function(){
    $("#account-dropdown").click(function(){
        $("#account-box").slideToggle(400);
        $(this).css("color", "white");
        return false;
    });                         
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];

    $("#tags").autocomplete({
        source: availableTags
    });

});
</script>
</header>

Whenever the page loads I get the error saying that autocomplete is not a function and I really can't figure out why it's doing this.

Any help is appreciated, thanks.

EDIT

I've removed the second instance in the header file where the jquery script was called and I'm still getting the error.

Additional information may be of use here, but I wasn't the one who made the initial files and I've been given a few tasks to improve it, one being getting the search bar to use so it may be useful to know that there are multiple (quite a lot in fact) files in this project. A lot of these call different scripts as well, should I move all these scripts into my "jquery-ui-src.php" file? is it possible this would fix the error?

Answer 1

Because you are importing another jQuery in the middle, hence everything you imported with your jquery-ui-src.php has been reset.

Please try removing this line:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

There is also invalid ending tag: </div>//other code included here. Remove it.

Below is the working code. Here is the fiddle .

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<header id="header" class="website-header">
    <form role="search" action="" method="GET" style="width: 12em; margin: 0.1em 2em;margin-left:7em">
        <div class="input-group">
            <input type="text" id="tags" class="search-field form-control" />
            <div class="input-group-btn">
                <button type="submit" class="btn btn-default">Search</button>
            </div>
        </div>
    </form>
    <script>
        $(document).ready(function() {
            $("#account-dropdown").click(function() {
                $("#account-box").slideToggle(400);
                $(this).css("color", "white");
                return false;
            });
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"];

            $("#tags").autocomplete({
                source: availableTags
            });

        });
    </script>
</header>