Problem with autocomplete functionality in Angular Material's md-contact-chips

Having some trouble with the autocompletion feature of md-contact-chips. I want to capture the $query as soon as someone starts typing.

HTML

<md-contact-chips
   ng-model="members"
   md-contacts="querySearch($query)"
   md-contact-name="fullname"
   md-contact-email="email"
   md-contact-image="image"
   filter-selected="true"
   md-require-match
   placeholder="Add members">
</md-contact-chips>

JS

$scope.querySearch = function($query) {
    console.log($query);
};

Encountering an issue when trying to search for more members (already stored in my $scope.members). The error message in JS reads:

TypeError: $scope.textChange is not a function

My setup includes Angular 1.4.1 and Material 0.10.0

Answer №1

If you're having trouble with the functionality, try following the solution recommended here by norkunas.

Incorporate

md-selected-item-change="null" md-search-text-change="null"
into the md-contact-chips element.

Answer №2

After encountering a similar problem, I was stumped as to what the issue could be. Ultimately, I made the decision to downgrade my angularjs version to 1.3.15, coincidentally the same version utilized by material.angularjs.org. Surprisingly, this solved the problem for me.

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

Implementing Checkbox Functionality within a Dropdown Menu using AngularJS or JavaScript

I am interested in finding a multi-select checkbox solution similar to the one demonstrated here: Instead of using jQuery, I would prefer options in AngularJS or pure JavaScript. Does such a solution already exist in these frameworks, or is there guidance ...

Incorporate an array into a JSON object using AngularJS

I'm attempting to append a JSON array to a JSON object. Here's my code: $scope.packageElement = { "settings": [ { "showNextPallet": true, "isParcelData": false, "isFreightData": true, " ...

Getting the ajax response by utilizing a custom attribute within a php loop is definitely a handy trick

Currently working on integrating ajax with php. I have a set of buttons within a loop, and I am trying to display or fetch data (number) in the correct place/div using the "attr" method in jQuery. However, it seems that it is not functioning as expected on ...

Setting the initial date value for an Angular Material md-datepicker to a specific date

When using Angular Material md-datepicker, by default the system's current date is set as today's date and highlighted in the calendar. However, I am looking for a way to manually set any given date as today's date instead. Please see this i ...

Struggling to interpret JSON data from an AJAX call using jQuery in a Python/Flask application

Currently, I am attempting to analyze a POST request sent via AJAX using jQuery in a python script. The structure of the request is as follows: request.js function get_form_data($form){ var unindexed_array = $form.serializeArray(); var indexed_ar ...

convert a string to JSON format using Node.js Express

Currently, I am viewing some string data in a browser that has been processed using python-node js express. The data looks something like this: In order to manipulate the data more effectively, I would like to convert it into JSON format that follows this ...

The usage of ngRoute clashes with the functionality of Animated Scroll

I am experiencing a conflict between my ng-route and the animated scroll feature on my website: Below is the code for my scroll element: <a href="#one" class="goto-next scrolly">Next</a> In this code, "#one" represents the section ID to scro ...

CKEditor5: Unable to access the 'pluginName' property because it is undefined

I am facing a challenge in creating a custom image plugin for CKEditor that can seamlessly integrate with my own image upload system. While trying to set up this plugin, I encountered some difficulties. Oddly enough, the "out-of-the-box" plugins work perfe ...

What is the best way to instantly validate a form in React before submitting?

Having trouble with my form validation. The issue is that after validating the form on submit, I have to click the submit button a second time to actually send it and see the console.log at the bottom of the file. Any ideas on what might be causing this a ...

What is the best way to use async await to listen for an event in a child component with Vue-router?

To prevent users from unintentionally leaving an unsaved form, I am looking to implement a custom modal alert system with vue-router. Although the use of the standard browser alert box is an option, beforeRouteLeave (to, from, next) { const answer = wi ...

Angular mat-table experiencing issues with matToolTip functionality

My Angular project is using Angular Material 16x, but for some reason, the matToolTip is not displaying at all. I have experimented with various versions, including a basic matTooltip="hello world", but I just can't seem to get it to work. I have come ...

The curly braces in AngularJS are not resolving as expected, however, the ng-bind directive is functioning properly

I'm currently working on a Django application and utilizing AngularJS for my frontend. I have a straightforward piece of code that looks like this: <div class="vert-carousel" ng-controller="PrizeController"> <div class="gallery-cell" n ...

The Node.js server seems to be continuously loading without producing any output

I've been struggling with getting my server to function properly. Whenever I send post data, the page just keeps loading and doesn't display any results. Here is a snippet of my Node.js file: var http = require('http'); var url = requi ...

AJAX - Self-Executing Anonymous Function

I have a question that may seem trivial, but I want to make sure I'm heading in the right direction. I've created two different versions of an XMLHttpRequest wrapper, and both are functioning correctly. const httpRequest = function () { let ...

Retrieve the page dimensions from a Material UI component `<DataGrid autoPageSize/>`

When utilizing <DataGrid autoPageSize/>, as outlined in the documentation, you can have a Material UI table that adjusts its page size based on the browser height. However, if you are fetching data from the server progressively, it becomes essential ...

"Enhance your website with dynamic PHP Ajax live search and infinite scrolling

When scrolling to the bottom of the .dropdown-menu, I would like to load an additional 7 rows from the database. However, I haven't been successful in implementing this feature using the script provided. I am currently utilizing Bootstrap CSS and JS f ...

HTML5 Embedding a redirect iframe for connection status validation [UPDATE]

I've created an offline HTML file and embedded an iframe within it that redirects to a site if there is an available internet connection. However, in the event of no internet connection, the iframe will redirect to an offline page. Could someone plea ...

"Exploring ways to create and save content in a different root folder within a nodejs project using my

In the process of developing my npm module, I am faced with the task of creating or writing a file in either the root directory or a specific folder within the nodejs project that will be utilizing my module. This includes users who will be implementing my ...

The functionality of two-way data binding seems to be malfunctioning within the directive

This is my first attempt at creating a directive in AngularJS and I am still learning the ropes. I'm currently experimenting with integrating Bootstrap Year Calendar with AngularJS. The Bootstrap Year Calendar is a jQuery plug-in designed to display ...

When a radio button is chosen, multiple text fields must be completed in order to validate the form

I am working with a set of 3 radio buttons. If the last option, labeled "In Home," is chosen, then all 4 of the text fields must be filled in for the form to validate. While I have found information on how to achieve this with checkboxes or a single text f ...