Skip to content
This repository has been archived by the owner on Nov 6, 2024. It is now read-only.

Autocomplete not working with chip input (does with regular input) #353

Open
mrtruebeliever opened this issue Oct 4, 2018 · 1 comment

Comments

@mrtruebeliever
Copy link

mrtruebeliever commented Oct 4, 2018

I get folowing error when using autocompleteoptions for chip input

Uncaught TypeError: r.autocomplete is not a function
at w.fn.init.chips (materialize.min.js:6)
at HTMLElement. (materialize.min.js:6)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at w.fn.init.init (materialize.min.js:6)
at w.fn.init.t.fn.material_chip (materialize.min.js:6)
at ngx-materialize.js:899
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)

Steps to Reproduce (for bugs)

copy and paste from the demo page. When using the regular input, autocomplete does work without a problem.

<mz-chip-input [placeholder]="'Start typing'" [autocompleteOptions]="autocompleteOptions"></mz-chip-input>

My code:
// autocomplete autocompleteOptions: Materialize.AutoCompleteOptions = { data: { 'Apple': null, 'Microsoft': null, 'Google': 'assets/google_g_logo.png', } };

Package.json:
{ "name": "zvo-ultimate", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^6.1.9", "@angular/common": "^6.0.3", "@angular/compiler": "^6.0.3", "@angular/core": "^6.0.3", "@angular/forms": "^6.0.3", "@angular/http": "^6.0.3", "@angular/platform-browser": "^6.0.3", "@angular/platform-browser-dynamic": "^6.0.3", "@angular/router": "^6.0.3", "core-js": "^2.5.4", "ngx-materialize": "^6.1.3", "rxjs": "^6.0.0", "zone.js": "^0.8.26" }, "devDependencies": { "@angular/compiler-cli": "^6.0.3", "@angular-devkit/build-angular": "~0.6.6", "typescript": "~2.7.2", "@angular/cli": "~6.0.7", "@angular/language-service": "^6.0.3", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.2.1", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.3.0", "ts-node": "~5.0.1", "tslint": "~5.9.1" } }

Your Environment

Version used: ^6.1.3
Angular version used: ^6.1.0
Browser Name and version: Google Chrome Version 69.0.3497.100
Operating System and version (desktop or mobile): Windows 10

Anyone else got this issue?

Thank you.

@mrtruebeliever
Copy link
Author

I figured out that when I load jquery 2.2.4 in my index.html, the chips autocomplete does work.
jQuery version 3.3.1 that I loaded via node_modules/jquery/dist/jquery.min.js in angular.json seems te be not compatible.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant