jQuery Autocomplete API Issue: Undefined

I've been attempting to implement a basic text box using the jQuery API from DevBridge. I followed instructions in this video tutorial to create my code.

However, despite properly declaring scripts before the JS code and ensuring proper mappings, I'm encountering the following issues: https://github.com/devbridge/jQuery-Autocomplete/releases

Below is the code snippet:

<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>

Answer №1

If you see an error message in the console indicating that you are missing the jQuery library, it means that the jQuery Autocomplete library requires it.

To resolve this issue, make sure to include jQuery before the autocomplete libraries like this:

<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">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to execute a jQuery function consecutively, ensuring that each one finishes before the next begins?

I've been struggling to implement a callback in order to solve this problem. Despite trying various solutions, I haven't been able to get it right. I won't bore you with my failed attempts; instead, let me show you what I'm attempting t ...

Learn how to creatively style buttons with dynamic effects using tailwindcss

My Desired Button: I have a Button component that can accept a variant prop. My goal is to have the button's className change dynamically based on the prop passed to it. Instead of using if/else statements for different buttons, I want to use a sing ...

Using HTML or JavaScript to generate a multitude of identical HTML elements on a webpage

I am currently designing a page that requires the presence of numerous tree illustrations with leaves, spanning across the width at the bottom of the page. I have considered two methods to achieve this. One option is to create a single set of trees and lea ...

Determine whether a WebElement contains a particular content within the :after pseudo class

After locating my element in Selenium, I've come across an interesting challenge. IWebElement icon = box.FindElement(By.ClassName("box-icon")); Sometimes, this element (icon) has a content set as follows: &:after { content: $icon-specia ...

What is the best method to grab the href attribute with jQuery?

<table class="table1"> <tbody> <tr class="tablerow1"> <td valign="top"> <strong> <a href="http://www.wineweb.com/scripts/wineryPg.cfm/11094/Aan-de-Doorns-Co%2Dop ...

"Following successful POST login and session storage in MongoDB, the session is unable to be accessed due

When sending login data by POST with the credentials: 'include' option from client server 5500 to backend server 3000, I ensure that my session data is properly stored in MongoDB thanks to the use of 'connect-mongodb-session'. In the ba ...

Retrieve the Nth class of an element that has multiple classes without relying on the .attr("class") method in jQuery

Within a container with two styles, the initial nested div <div class="datacheck"> <div class="classic_div_data customdataid_305"> some values are included here </div> <div class="optiondiv"> </div> </div& ...

Loading complex models with Three.js

Whenever I attempt to load a significantly large file utilizing the appropriate loaders provided by the library, the tab in which my website is running crashes. Despite trying to implement the Worker class, it doesn't seem to resolve the issue. Here i ...

Challenges with Access-Control-Allow-Origin within the website's domain

Why am I encountering an issue when attempting to make an XMLHTTPRequest from a JavaScript file to a web service on the same domain, resulting in: Access-Control-Allow-Origin error stating that the origin is not allowed? Switching mydomain.com to localh ...

Autocomplete feature in MUI allows filtering to begin after typing at least 3 characters

I've encountered an issue with the Autocomplete MUI component I'm using to filter a list of checkboxes. The popup with options should remain open at all times, but I only want the filtering to be triggered when the user input is more than 3 chara ...

Creating dynamic Vue2 router links based on server-generated data

Currently, I am working on a Vue2 Single Page Application that fetches content from the server and allows clients to edit it in a Content Management System (CMS). The issue I'm facing is that when a user adds a relative link such as /about-us, Vue do ...

Using varied colors to style list items

Is there a way to apply three different colors to my list items? What is the best method for achieving this? This is what I have in my code: li { width: 33.333%; float: left; padding: 15px; list-style: none; } .light { background-color: #0 ...

I could really use some assistance with this script I'm working on that involves using ($

Using Ajax for Form Submission: $.ajax({ url: 'process.php', type: 'post', data: 'loginName=' + $("#loginName").val() + 'loginPass=' + $("#loginPass").val(), dataType: 'json', success: func ...

What is the most effective way to transmit multiple pieces of server-side data to JavaScript?

Imagine having multiple Javascript codes embedded in pages. Currently, it's simple to initialize variables by using Print/Echo statements to set JavaScript values. For example: var x = <?php echo('This is a value');?> Initially, I co ...

Converting HTML's nested <ul> element into JSON format

I am working on developing a form builder application that allows users to create forms through drag and drop functionality. The main structure of my form is based on the <li> tag, with nested <li> and <ul> tags present underneath it. On ...

What is the best way to set the keyframes CSS value for an element to 0%?

Would like to create a progress indicator div using CSS animations? Check out the JSBin link provided. The desired behavior is to have the div width increase from 30% to 100% when the user clicks on stage3 after stage1, rather than starting from 0%. Althou ...

Use JQuery to gradually decrease the opacity of divs individually

I am currently working on a function that fades out all divs except the one that has been clicked on simultaneously. However, I want them to fade out one by one instead. Additionally, I would like the divs to fade out in a random order. If anyone knows ho ...

Implementing momentLocalizer with moment.js in react-big-calendar alongside fullcalendar.js

I'm currently working with react-big-calendar and I require assistance in setting up localization as per the example provided on GitHub. import BigCalendar from 'react-big-calendar'; import moment from 'moment'; BigCalendar.setLo ...

Solving Cross-Origin Resource Sharing problem in an Express JS application

I have encountered a CORS error while using this code, despite having applied the necessary cross-origin headers. I am seeking guidance on how to resolve this issue. var express = require('express'); var bodyParser = require('body-parser&ap ...

Exploring the effectiveness of testing Svelte components

Looking to test a component that utilizes a third-party module without mocking the imported components? Check out this example: // test.spec.ts import Component from "Component"; describe('Component', () => { test('shoul ...