Jonathan Scialpi
Jonathan Scialpi

Reputation: 841

Autocomplete API - jQuery Undefined

I am trying to have a simple text box that will use the jQuery API from DevBridge. I watched this tutorial to produce my code.

However, I recieve the below issues although I have declared scripts before the JS code and also mapped properly: enter image description here

Here is my code:

<script type="text/javascript" src="resources/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="resources/js/jquery.autocomplete.min.js"></script>
<link rel="stylesheet" href="resources/css/main.css" type="text/css">
<link rel="stylesheet" href="resources/css/styles.css" type="text/css">


<style>
h1 {text-align:center; margin:20px 20px;}
#autocomplete{margin:0 auto;})
</style>
<title>Job Search</title>
</head>

<body>
<form method ="GET" action="Jobs">
    <fieldset>

        <legend>Page:</legend>
        <input type="text" name="page" placeholder="enter a number" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

        <legend>Descending?</legend>
        <input type="text" id="autocomplete" />
        <script type="text/javascript">
        var arr= ["test", "apple", "orange"];

        $('#autocomplete').autocomplete({
            lookup: arr
        });
</script>

Upvotes: 0

Views: 55

Answers (1)

Whew32
Whew32

Reputation: 116

The error message in the console shows you that you are missing the jQuery library, which the jQuery Autocomplete library reuqires.

You need to include jQuery above the autocomplete libraries like so:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="resources/js/jquery.autocomplete.min.js"></script>
<link rel="stylesheet" href="resources/css/main.css" type="text/css">
<link rel="stylesheet" href="resources/css/styles.css" type="text/css">

Upvotes: 1

Related Questions