Reputation: 841
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:
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
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