"Encountered an issue with implementing Materialize CSS autocomplete with JQuery UI: Uncaught TypeError - 'this.source is not

I am currently utilizing the Materialize CSS library and I came across an interesting feature for creating an #autocomplete dropdown (located at the end of the page).

However, upon trying to implement it, an error keeps popping up while typing.

Uncaught TypeError: this.source is not a function
at t.(anonymous function).(anonymous function)._search (http://localhost/imgup/js/jquery-ui.min.js:2345:101)
at t.(anonymous function).(anonymous function)._search (http://localhost/imgup/js/jquery-ui.min.js:139:77)
at t.(anonymous function).(anonymous function).search (http://localhost/imgup/js/jquery-ui.min.js:2341:175)
at t.(anonymous function).(anonymous function).search (http://localhost/imgup/js/jquery-ui.min.js:139:77)
at t.(anonymous function).(anonymous function). (http://localhost/imgup/js/jquery-ui.min.js:2337:74)
at i (http://localhost/imgup/js/jquery-ui.min.js:302:62)

Despite my efforts to find a solution, I was unable to locate any useful answers.

This snippet showcases the relevant Materialize CSS - HTML code:

<input type="text" id="autocomplete-input" class="autocomplete">

The accompanying JavaScript for enabling autocomplete functionality:

$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'http://placehold.it/250x250'
},
limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
onAutocomplete: function(val) {
// Callback function when value is autcompleted.
},
minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
});

Additionally, there are screenshots illustrating the error logs encountered:

Error in console: https://i.sstatic.net/i0gsj.png

Error in file that is occurring - 1: https://i.sstatic.net/ebbWr.png

Error in file that is occurring - 2: https://i.sstatic.net/tcfjB.png

Error in file that is occurring - 3: https://i.sstatic.net/I5Lgl.png

Error in file that is occurring - 4: https://i.sstatic.net/w2h5d.png

Error in file that is occurring - 5: https://i.sstatic.net/1PMtF.png

If anyone could offer some assistance on resolving this issue, I would greatly appreciate it.

jquerycssjquery-uijquery-ui-autocompletematerialize

Answer №1

Can you specify the jQuery/Materialize versions you are currently using? Here is a sample pen where it is functioning:

http://codepen.io/anon/pen/RpBRjJ

Have you enclosed your jQuery code within a structure like $(document).ready()?

Answer №2

When loading the jquery-ui library, you may encounter the error message:

"this.source is not a function"

If this happens, you won't be able to use the usual jquery 

$('input.autocomplete').autocomplete()
method. Instead, you'll have to utilize alternative calls such as M.Autocomplete.

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

Influencing various classes when :active is triggered

I encountered a challenge while working on an HTML project. I included a checkbox that should highlight all text input fields when checked. However, I'm facing an issue where some of the input fields within tables are not being affected by my code. An ...

htmlcsstextcss-selectors

adaptive menu bar with collapsible submenus

I would like to create a right side inline navigation bar with dropdown functionality. When the screen size is small, I want to hide all the menus and display a button. Clicking on the button should reveal a vertical navigation bar. I am facing an issue i ...

htmlcss

Using JavaScript, grammatically add material icons side by side

Looking to dynamically update the contents of a div element by adding two material icons side by side. To test this, I created a simple fiddle that demonstrates what I am trying to achieve: https://jsfiddle.net/zog20r7n/3/ When attempting to modify line ...

javascripthtmlcssmaterial-design

Datatables - Array within an array

How can I access the 'emergencies' array in this case? {"organizationUuid":1,"emergencyUuids":null,"emergencies":[{"emergencyUuid":1,"emergencyTitle":"Student Fainted in Class","pickupLocation":"1122 Fowler St. 30309","possiblePatientUuids":[1, ...

jqueryajaxdatatables

Utilizing the Invision prototype for embedding

They provided me with this code snippet <iframe width="424" height="916" src="//invis.io/U5574OIA3" frameborder="0" allowfullscreen></iframe> However, I am unsure of how to properly embed it. I attempted to insert the line into my website but ...

htmlcssiframeembed

What causes a div with an image inside to not expand the height of its parent div?

I'm puzzled as to why the mainCountainerHeadLogo isn't expanding the parent div, mainCountainerHead, in terms of height. Interestingly, when I adjust the page scale, both mainCountainerHeadTitle and mainCountainerHeadMenu do expand the mainCount ...

htmlcssimage

Discovering inner arrays within an outer array using the Plus function

Apologies if these questions seem basic in terms of JavaScript. Challenge 1. I am attempting to write code that can identify an inner array within an outer array, and the structure of the array looks something like this; var array = ['Bob', [ ...

javascriptjqueryarraysfunctionanonymous

Paste the URL into your clipboard without relying on JavaScript

Is there a way to implement a copy to clipboard function for email templates without relying on JavaScript? ...

htmlcss

Creating a dynamic background image for the ul/li div element

As a newcomer to website development, I am currently exploring how to dynamically set images in the ul/li elements within a div. Below is a snippet of the HTML code I have been working on: <div class="results"> <ul class="row"> < ...

javascriptjqueryhtmlcss

Using Datatables footerCallback to exclude certain rows and calculate the sum using JSON data

This query is inspired by footerCallback with duplicate cell numbers I have successfully applied the solution provided by @andrewJames (thank you). My objective is to calculate the total of the last column in the table, excluding the salary for individua ...

htmljqueryjsondatatables

Jquery menu block shift

I am looking to implement a timer for the submenu within my menu. The idea is to show the submenu for 3 seconds after a mouse-over event. I have already set up a function to display and hide the submenu, but I am facing an issue where the submenu shifts to ...

jqueryhtmlcss

Jquery encountered an error: excessive recursion detected

After a day of troubleshooting, I am still facing issues with my file upload system that uses client-side encryption with CryptoJS. The problem arises when Firebug's console throws an error stating "too much recursion". I have tried various methods t ...

jqueryajaxrecursionxmlhttprequestcryptojs

Is it possible for JQuery AJAX requests to activate Angular ng-click directives?

I've been working on a mobile application that uses a combination of JQuery and Angular. Every now and then, I encounter a strange bug. The Angular directives are implemented in a partial that is included through the ng-include directive: <ng-inc ...

jqueryajaxangularjsangularjs-directiveangularjs-scope

Windows and MacOS each use unique methods for displaying linear gradients

Check out this code snippet featuring a background gradient background: rgba(0,0,0,0) linear-gradient(rgb(245, 245, 245),rgba(0,0,0,0)) repeat scroll 0 0; This code renders correctly on Windows (chrome, ie, firefox) https://i.stack.imgur.com/XU2gW ...

htmlcsswindowsmacos

Angular dynamically selects a dropdown option when the page is loaded

Check out this dropdown example: <div class="col-md-6"> <div class="form-group> <label class="control-label">Role</label> < ...

javascriptjqueryangularjs

Implementing a function to navigate to a different page using jQuery mobile

I'm attempting to pass a function when changing pages in jQuery Mobile, but I keep getting an error that points to `$.ajax` $( ":mobile-pagecontainer" ).pagecontainer( "change", "#schoolperformance", { reload : true, showLoadMsg : false, ...

javascriptjqueryajaxjquery-mobilejquery-mobile-ajax

What is the best way to apply absolute positioning to an image tag that is related to

I'm completely new to both rails and javascript. In my app, I have a table of venues categorized by type and area. These venues are displayed as partials on the index page, each with its own icon that appears on a map located to the left of the screen ...

javascriptjqueryruby-on-railsactiverecordcss-position

Enabling the use of special characters when submitting a form

Currently, I am in the process of developing a contact form for a website. My main objective is to enable users to input non-Latin characters such as é or 車. However, I have encountered some challenges regarding where I should implement this feature. On ...

phpjqueryhtmlajaxforms

How to use jQuery to locate an ID or form outside of its parent element

Is it possible to access an ID or form that is outside of its parent ID? For instance: <ul> <li> <a></a> </li> </ul> <div> <div> <div> <div> ...

javascriptjquery

creating a responsive form with angular flex layout

We are currently utilizing the following library: https://github.com/angular/flex-layout Our current code for achieving fxlayout is as follows, however, it is not functioning correctly on mobile devices. <div fxLayout="column" id="width& ...

cssangularresponsive-design