Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant