kadoshms / ionic2-autocomplete Goto Github PK

I have only tested this in the browser (with 'ionic serve'), so it's unclear if this issue is present in a built Android/iOS app.

If you click within the browser, then drag the cursor outside of the browser (or even into the address bar or tabs) the app crashes with a runtime error.

I think the following lines of code ('ionic2-auto-complete\index.js'):

AutoCompleteComponent.prototype.documentClickHandler = function (event) {
    var /** @type {?} */ target = event.target;
    var /** @type {?} */ parent = event.target.parentElement;
    if (target.className.split(" ").indexOf("ion-auto-complete") == -1 && parent.className.split(" ").indexOf("ion-auto-complete") == -1) {
        this.hideItemList();
    }
};

need to be updated to this:

AutoCompleteComponent.prototype.documentClickHandler = function (event) {
    var /** @type {?} */ target = event.target;
    var /** @type {?} */ parent = event.target.parentElement;
    if (target.className) {
      if (target.className.split(" ").indexOf("ion-auto-complete") == -1 && parent.className.split(" ").indexOf("ion-auto-complete") == -1) {
          this.hideItemList();
      }  
    }
};

Changing to the code above appears to resolve the issue.

cause error of getValue is undefine

code is like

@ViewChild('searchbar') searchbar: any;
and calling function
console.log(this.searchbar.getValue());
in autocomplete.componenent.ts

public getValue() {
this.keyword
return
}

}
in <ion-autocomplete #searchbar></ same>

Need to set focus on the ionic2-autocomplete control.
setFocus() of ion-searchbar is not working.

Please prvide some light on this.

Hi, Love this plugin.
Would there be any way of exposing the search event on the searchbar i.e. when the user clicks search or presses enter?
The reason I'm asking is that I do not want to search as the user is typing, only when they are finished. I currently cannot see a way to do this other than the template exposing the search event.

In fact, scrub the above, I'll make a fork and PR

The drop-down list does not display

show a searching indication while the search api returns the result set.

Do we have any option to show such indication

You must remove the value attribute from 'ion-searchbar'.

Hi... I have a problem with clearing input after selecting any item. In works in browser but not on the device... I call clearValue function on itemSelected event...

This is how I call a function when an item is selected:
(itemSelected)="addRecipient($event)"

and this is the function I call on itemSelected event:
addRecipient(recipient: RecipientInterface) { this.selectedRecipients.push(recipient); this.autocompleteRecipients.clearValue(); }

Hi, I created ionic 2 app about 2 months ago... Now I want to upgrade it to ionic 3 but I can't because I can't install your plugin... I get the following error:
...
npm ERR! [email protected] postinstall: typings install
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'typings install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic2-auto-complete package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ionic2-auto-complete
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ionic2-auto-complete
npm ERR! There is likely additional logging output above.
...

Hello,

First of all, thank you for this component, well done.
I'm using ionic2-autocomplete in combination with google Places API. I'm doing a call to this api in order to fetch predections for the input entered by the User.
To achieve this, I'm using rxjs Subject which allows me to emit values when the response of the API has been returned. However, the getResults method supports wether to return an Observable or an Array. So here is my question, Can you add support to Subject as the return type of getResults method. Is that possible ?

Thank you.

Hey,

I'd like to use the ngModel directive on the ion-auto-complete tag, as it is available on ion-searchbar and ion-input, but it seems not to be implemented (i.e., I get the following error when setting this directive: "No value accessor for form control with name: 'foo' ")

I would be really grateful if you could make this possible !

can we set initial value? if yes, can you give us an example? thanks

Hi,
I'm trying to compile my app (ionic 3 app), but I have this problem:

[01:34:15] ngc started ... [01:34:17] ionic-app-script task: "build" [01:34:17] Error: Unexpected value 'AutoCompleteItemComponent in /Users/claudio/Progetti/xxx/node_modules/ionic2-auto-complete/src/autocompleteitem.component.ts' declared by the module 'AutoCompleteModule in /Users/claudio/Progetti/xxx/node_modules/ionic2-auto-complete/index.ts'. Please add a @Pipe/@Directive/@Component annotation. Error: Unexpected value 'AutoCompleteItemComponent in /Users/claudio/Progetti/xxx/node_modules/ionic2-auto-complete/src/autocompleteitem.component.ts' declared by the module 'AutoCompleteModule in /Users/claudio/Progetti/xxx/node_modules/ionic2-auto-complete/index.ts'. Please add a @Pipe/@Directive/@Component annotation. at Error (native) at syntaxError (/Users/claudio/Progetti/xxx/node_modules/@angular/compiler/bundles/compiler.umd.js:1550:34) at /Users/claudio/Progetti/xxx/node_modules/@angular/compiler/bundles/compiler.umd.js:14552:40 at Array.forEach (native) at CompileMetadataResolver.getNgModuleMetadata (/Users/claudio/Progetti/xxx/node_modules/@angular/compiler/bundles/compiler.umd.js:14534:54) at addNgModule (/Users/claudio/Progetti/xxx/node_modules/@angular/compiler/bundles/compiler.umd.js:23050:58) at /Users/claudio/Progetti/xxx/node_modules/@angular/compiler/bundles/compiler.umd.js:23061:14 at Array.forEach (native) at _createNgModules (/Users/claudio/Progetti/xxx/node_modules/@angular/compiler/bundles/compiler.umd.js:23060:26) at analyzeNgModules (/Users/claudio/Progetti/xxx/node_modules/@angular/compiler/bundles/compiler.umd.js:22935:14)

with ionic serve it works perfectly, but when I try to compile with ' ionic build android --prod --release ' I receive that error

this is my ionic info:
`Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
ios-deploy version: 1.9.1
ios-sim version: 4.1.1
OS: macOS Sierra
Node Version: v5.8.0
Xcode version: Xcode 8.3.2 Build version 8E2002`

thank you in advice

<ion-auto-complete [dataProvider]="stationAuto" (itemSelected)="ionicViewData($event)" #searchbar>
<ion-auto-complete [dataProvider]="stationAuto" (itemSelected)="ionicViewData1($event)" #searchbar>

i call two ion-complete for selecting source and destination. Autocomplete list is comming for both but things is secound declare ion-complte cause keyword to null or i will like of 1st ion-complete keyword.
ionicViewData(){
this.from=this.searchbar.getValue(); ///value is comming
console.log(this.from);
this.stNameToCode.getPosts(this.to);
}

ionicViewData1(){
this.to =this.searchbar.getValue(); //////here value is comming nulll
console.log(this.to);
this.stNameToCode.getPosts(this.to);
}

Mor, thanks for your efforts on this. I'm not yet adept enough to create this component for Ionic2, so I'm hoping you'll finish this one! Any idea on when it might be ready?

If I understand it right, as of know we can only customize one AutoCompleteItem and have to use it for all the AutoComplete component ?
Or is there a way to create multiple items and use them for different AutoComplete component ?
If not I'd like to work on the feature.

Hey bro ! thanks for your plugin , i appreciated it.
but when i installing using npm there's problem

M:\Project Freelance\ionic\TestCordova\ProjectFormPost>npm install ionic2-auto-complete --save

[email protected] postinstall M:\Project Freelance\ionic\TestCordova\ProjectFormPost\node_modules\ionic2-auto-complete
typings install

'typings' is not recognized as an internal or external command,
operable program or batch file.
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "ionic2-auto-complete" "--save"
npm ERR! node v6.2.2
npm ERR! npm v3.9.5
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: typings install
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'typings install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic2-auto-complete package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ionic2-auto-complete
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ionic2-auto-complete
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! M:\Project Freelance\ionic\TestCordova\ProjectFormPost\npm-debug.log

This error is from your repository or what?
Thank you

If it is a free software, I would like to contribute.

After APK Installation we are getting below error
Uncaught SyntaxError: missing ) after argument list
below code is from auto complete.component.ts
if (result instanceof rxjs_1.Observable) {
result
.subscribe(
(results) => {
this.suggestions = results;
this.showItemList();
},
(error) => console.error(error)
)

This is not really a issue, but more of a question. Is there any way to get the value of the input upon select before it gets replaced with what i selected(e.g. what i used to search)?

In my scenario, I have to provide auto complete of States based on country already selected by the user in the field above. Current Service takes keyword only and not the context before. Anyway to cover this scenario?

Custom template.
comp-test-item.ts file:

import {AutoCompleteItem, AutoCompleteItemComponent} from 'ionic2-auto-complete';
@AutoCompleteItem({
  templateUrl: 'comp-test-item.html'
})
export class CompTestItem extends AutoCompleteItemComponent{}

comp-test-item.html
test: <span [innerHTML]="data.name| boldprefix:keyword"></span>

Give this error:
GET http://172.16.0.167:8100/comp-test-item.html 404 (Not Found)
Unhandled Promise rejection: Failed to load comp-test-item.html ; Zone: ; Task: Promise.then ; Value: Failed to load comp-test-item.html undefined

Which address the plugin expects?

Using custom templates and following your example, give error:
More than one component matched on this element. Make sure that only one component's selector can match a given element. Conflicting components: AutoCompleteItemComponent,CompTestIte

This is the extends:

@AutoCompleteItem({ template : "<img /> - <span [innerHTML]="data.name | boldbegin:keyword"></span>" }) export class CompTestItem extends AutoCompleteItemComponent{}

and this the call in HTML:
<ion-auto-complete [dataProvider]="autocompleteProvider"></ion-auto-complete>

ps:
It would be great if you were to update the project and documentation to Ionic rc.5
Many things have changed

{
"response_code": 200,
"total": 23,
"train": [
"SHARAVATHI EXP (11035)",
"SHARAVATI EXP (11036)",
"SHAKTIPUNJ EXP (11447)",
"SHAKTIPUNJ EXP (11448)",
"SHANE PUNJAB (12497)",
"SHANE PUNJAB (12498)",
"SHALIMAR EXP (14645)",
"SHALIMAR EXP (14646)",
"SHAHEED EXPRESS (14673)",
"SHAHEED EXP (14674)",
"SHALIMAR EXP (22641)",
"SHATABDI EXP (12007)",
"SHATABDI EXP (12008)",
"SHATABDI EXP (12009)",
"SHATABDI EXP (12010)",
"SHATABDI EXPRES (12019)",
"SHATABDI EXPRES (12020)",
"SHATABDI EXP (12025)",
"SHATABDI EXP (12027)",
"SHATABDI EXP (12028)",
"SHATABDI EXPRES (12041)",
"SHATABDI EXP (12243)",
"SHATABDI EXP (12244)"
],
"trains": [
{
"name": "SHARAVATHI EXP",
"number": "11035"
},
{
"name": "SHARAVATI EXP",
"number": "11036"
},
{
"name": "SHAKTIPUNJ EXP",
"number": "11447"
},
{
"name": "SHAKTIPUNJ EXP",
"number": "11448"
},
{
"name": "SHANE PUNJAB",
"number": "12497"
},
{
"name": "SHANE PUNJAB",
"number": "12498"
},
{
"name": "SHALIMAR EXP",
"number": "14645"
},
{
"name": "SHALIMAR EXP",
"number": "14646"
},
{
"name": "SHAHEED EXPRESS",
"number": "14673"
},
{
"name": "SHAHEED EXP",
"number": "14674"
},
{
"name": "SHALIMAR EXP",
"number": "22641"
},
{
"name": "SHATABDI EXP",
"number": "12007"
},
{
"name": "SHATABDI EXP",
"number": "12008"
},
{
"name": "SHATABDI EXP",
"number": "12009"
},
{
"name": "SHATABDI EXP",
"number": "12010"
},
{
"name": "SHATABDI EXPRES",
"number": "12019"
},
{
"name": "SHATABDI EXPRES",
"number": "12020"
},
{
"name": "SHATABDI EXP",
"number": "12025"
},
{
"name": "SHATABDI EXP",
"number": "12027"
},
{
"name": "SHATABDI EXP",
"number": "12028"
},
{
"name": "SHATABDI EXPRES",
"number": "12041"
},
{
"name": "SHATABDI EXP",
"number": "12243"
},
{
"name": "SHATABDI EXP",
"number": "12244"
}
]
}

this my array and i want to access TRAIN array not train then i dont want use labelAttribute any more
return result.json().train

        .filter(item => item..toLowerCase().startsWith(keyword.toLowerCase()) ) 
       it is giving me cant replace 


return result.json().trains
     
        .filter(item => item.name.toLowerCase().startsWith(keyword.toLowerCase()) ) 
       this code give me output but it is TRAINS arry not TRAIN

Is it possible to format the final search string rather than just using a named attribute?

For example a combination of 2 fields from the resulting object?

hey, thirst thanks for the super work. with the latest update ionic doesn't use gulp, what next?

import {AutoCompleteService} from 'ionic2-auto-complete';
import { Http } from '@angular/http';
import {Injectable} from "@angular/core";
import {AutoCompleteService} from "ionic2-auto-complete";
import 'rxjs/add/operator/map'

I've configured things as in the readme, and have getResults returning a static array of objects for testing.

However, the search results are not being displayed. I don't see any errors in the console logs.

Any idea what could be wrong here?

When I install ionic2-autocomplete with npm, and do the ionic serve, getting following issue. Any suggestion please?? I am relatively new to ionic2.

[01:58:08] typescript: ...omplete/node_modules/ionic-angular/components/virtual-scroll/virtual-scroll.d.ts, line: 220
Type 'IterableDiffer' is not generic.

 L219:  private _dom;
 L220:  _differ: IterableDiffer<any>;
 L221:  _scrollSub: any;

[01:58:08] transpile failed

Below is ionic info

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.2
Xcode version: Not installed

Using static data works fine and same with Observable, like your example.
But when I try to receive data from our backend using Promise, did not works.

getResults(keyword: string) {
	return new Promise(resolve => {
		let dataRequest = new WLResourceRequest('/adapters/RicercaArticoli/', WLResourceRequest.GET);
		dataRequest.setQueryParameter('keyword', encodeURIComponent(keyword));

		dataRequest.send().then(
			(response) => {
				this.data = response.responseJSON;
				resolve(this.data);
			}, 
			(failure) => {
				resolve('error');
		});
	}); 

What I have to change?
Thx!

My end users are slow typers. I do not want to make 10 calls per query. Query as defined as when user stops tying and looks at results. Do you know how to debounce the function call with this lib?

How to get selected item using (itemSelected) callback ?
eg : the data is {"name": "Indonesia", "currency":"IDR"}
how to get the "IDR" when event triggered ?
so i still want to showing "Indonesia" on input text but i need "IDR" as input value.

Thank you! 👍

So i'm just using this as a quick way of not making people type out a whole item as we know most of the categories they want to search so we are opting to use static data.

My Service is the following, I may be using it wrong I'm not sure since you didn't show how a static example would work in the docs.

import {AutoCompleteService} from 'ionic2-auto-complete';
import { Http } from '@angular/http';
import {Injectable} from "@angular/core";

@Injectable(

)

export class CompleteService implements AutoCompleteService {
  labelAttribute = "item";
  results: any;
  constructor(private http:Http) {

  }
  getResults(keyword:string) {
    return this.results = [
      {item:'engine oil'},
      {item:'engine oil filter'},
      {item:'fuel filter'},
      {item:'air cleaner'},
      {item:'hydraulic oil'},
      {item:'hydraulic oil filter'},
      {item:'transmission oil'},
      {item:'transmission oil filter'},
      {item:'coolant'},
      {item:'cab filter'},
      {item:'battery'},
      {item:'tires'}
    ]
  }
}

And here is a screenshot of the issue.

For scenarios where you don't have that many options it's actually useful to be able to see the different options before you input, so you know the options that are hopefully going to return some results.

I believe that right now this if check:
https://github.com/kadoshms/ionic2-autocomplete/blob/master/src/autocomplete.component.ts#L77

Would prevent that because the keyword is empty on initial click.

Thoughts on adding this kind of feature? Most likely behind some option flag?

When the user types in values in search text, drop down values are not appearing in Safari or iPhone. Same app is working fine on Chrome. Looks like the styles are not working in iOS based browsers. Can you verify please?

When you have a keyword in the search box that has an unclosed bracket in, you get the error:

Runtime Error
Invalid regular expression /(/: Unterminated group

This is being thrown from the BoldPrefix.transform method.

Uncaught (in promise): Error: Template parse errors: Can't bind to 'dataProvider' since it isn't a known property of 'ion-auto-complete'. 1. If 'ion-auto-complete' is an Angular component and it has 'dataProvider' input, then verify that it is part of this module. 2. If 'ion-auto-complete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <ion-auto-complete [ERROR ->][dataProvider]="countryAutoProvider"> "): ng:///StudentDetailsFormModule/StudentDetailsForm.html@67:29 'ion-auto-complete' is not a known element: 1. If 'ion-auto-complete' is an Angular component, then verify that it is part of this module. 2. If 'ion-auto-complete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]<ion-auto-complete [dataProvider]="countryAutoProvider"> "): ng:///StudentDetailsFormModule/StudentDetailsForm.html@67:10 Error: Template parse errors: Can't bind to 'dataProvider' since it isn't a known property of 'ion-auto-complete'. 1. If 'ion-auto-complete' is an Angular component and it has 'dataProvider' input, then verify that it is part of this module. 2. If 'ion-auto-complete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <ion-auto-complete [ERROR ->][dataProvider]="countryAutoProvider"> "): ng:///StudentDetailsFormModule/StudentDetailsForm.html@67:29 'ion-auto-complete' is not a known element: 1. If 'ion-auto-complete' is an Angular component, then verify that it is part of this module. 2. If 'ion-auto-complete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]<ion-auto-complete [dataProvider]="countryAutoProvider"> "): ng:///StudentDetailsFormModule/StudentDetailsForm.html@67:10 at syntaxError (http://localhost:8100/build/main.js:83444:34) at TemplateParser.parse (http://localhost:8100/build/main.js:93935:19) at JitCompiler._compileTemplate (http://localhost:8100/build/main.js:107686:39) at http://localhost:8100/build/main.js:107610:62 at Set.forEach (native) at JitCompiler._compileComponents (http://localhost:8100/build/main.js:107610:19) at createResult (http://localhost:8100/build/main.js:107495:19) at t.invoke (http://localhost:8100/build/polyfills.js:3:8971) at Object.onInvoke (http://localhost:8100/build/main.js:4625:37) at t.invoke (http://localhost:8100/build/polyfills.js:3:8911)Uncaught (in promise): Error: Template parse errors: Can't bind to 'dataProvider' since it isn't a known property of 'ion-auto-complete'. 1. If 'ion-auto-complete' is an Angular component and it has 'dataProvider' input, then verify that it is part of this module. 2. If 'ion-auto-complete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <ion-auto-complete [ERROR ->][dataProvider]="countryAutoProvider"> "): ng:///StudentDetailsFormModule/StudentDetailsForm.html@67:29 'ion-auto-complete' is not a known element: 1. If 'ion-auto-complete' is an Angular component, then verify that it is part of this module. 2. If 'ion-auto-complete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]<ion-auto-complete [dataProvider]="countryAutoProvider"> "): ng:///StudentDetailsFormModule/StudentDetailsForm.html@67:10 Error: Template parse errors: Can't bind to 'dataProvider' since it isn't a known property of 'ion-auto-complete'. 1. If 'ion-auto-complete' is an Angular component and it has 'dataProvider' input, then verify that it is part of this module. 2. If 'ion-auto-complete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <ion-auto-complete [ERROR ->][dataProvider]="countryAutoProvider"> "): ng:///StudentDetailsFormModule/StudentDetailsForm.html@67:29 'ion-auto-complete' is not a known element: 1. If 'ion-auto-complete' is an Angular component, then verify that it is part of this module. 2. If 'ion-auto-complete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]<ion-auto-complete [dataProvider]="countryAutoProvider"> "): ng:///StudentDetailsFormModule/StudentDetailsForm.html@67:10 at syntaxError (http://localhost:8100/build/main.js:83444:34) at TemplateParser.parse (http://localhost:8100/build/main.js:93935:19) at JitCompiler._compileTemplate (http://localhost:8100/build/main.js:107686:39) at http://localhost:8100/build/main.js:107610:62 at Set.forEach (native) at JitCompiler._compileComponents (http://localhost:8100/build/main.js:107610:19) at createResult (http://localhost:8100/build/main.js:107495:19) at t.invoke (http://localhost:8100/build/polyfills.js:3:8971) at Object.onInvoke (http://localhost:8100/build/main.js:4625:37) at t.invoke (http://localhost:8100/build/polyfills.js:3:8911)

[16:36:28] Error: Unexpected value 'AUTOCOMPLETE_DIRECTIVES' declared by the module 'AppModule'

"ionic2-auto-complete": "^1.3.1",
`import { AUTOCOMPLETE_DIRECTIVES, AUTOCOMPLETE_PIPES } from 'ionic2-auto-complete';

@NgModule({
declarations: [
MyApp,
LoginPage,
DefectSelectionPage,
WagonSetInfoPage,
HomePage,
InspectionHistoryPage,
ServiceHandlePage,
SplashPage,
WagonHoldInfoPage,
WagonInspectionPage,
WagonSearchPage,
AUTOCOMPLETE_DIRECTIVES,
AUTOCOMPLETE_PIPES
],`

The plugin works if you use it with "ionic serve"

When try to build a platform, I received this error message

Error: Unexpected value 'AUTOCOMPLETE_DIRECTIVES' declared by the module 'AppModule'
ngc failed
ionic-app-script task: "build"
Error: Error

I have include the plugin in my project with
"ionic2-auto-complete": "^1.3.1"
in package.json

Ionic info:
Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.0.0-beta.20
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS
Node Version: v6.9.1

i seem to keep getting this error, is am i doing anything wrong?
Module '"C:/Users/JonathanD/shoppy_v0.0.2/node_modules/ionic2-auto-complete/dist/index"' has no exported
member 'AutoCompleteItem'.

   L1:  import { AutoCompleteItem ,AutoCompleteItemComponent ,AUTOCOMPLETE_PIPES} from 'ionic2-auto-complete';

        Module '"C:/Users/JonathanD/shoppy_v0.0.2/node_modules/ionic2-auto-complete/dist/index"' has no exported
        member 'AutoCompleteItemComponent'.

   L1:  import { AutoCompleteItem ,AutoCompleteItemComponent ,AUTOCOMPLETE_PIPES} from 'ionic2-auto-complete';

This is the easy way to reproduce, but when I run ionic build android --build --release I have the same error.

# npm run build

> [email protected] build /home/xxxxx/devel/ionic2-autocomplete
> ngc -p tsconfig.json

Unexpected value 'AutoCompleteItemComponent in /home/xxxxx/devel/ionic2-autocomplete/src/autocompleteitem.component.ts' declared by the module 'AutoCompleteModule in /home/xxxx/devel/ionic2-autocomplete/index.ts'. Please add a @Pipe/@Directive/@Component annotation.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `ngc -p tsconfig.json`
npm ERR! Exit status 1

Hi guys,

thanks for taking your time to create and publish plugins. An small suggestion is to add a live example of the plugin working or at least screenshots showing how it works.
I'm not sure if this is what I need unless I see it working.

Regards

Is this because you have compile target to ES6?

Hi, I'm trying to use this component with google places API, but I can't figure out how to make it work properly. I saw the example in the documentation but I don't understand where to specify the json field to show in the autocomplete.
In my case I have this json object:

https://developers.google.com/maps/documentation/javascript/reference#AutocompletePrediction

and I need to use the description field for the autocomplete.
Any ideas?

Hi,

How can I get the item when I click on autocomplete-item? There is no public method for getting items.

Thank's!

First off, this is absolutely awesome, thank you! A quick feature that could be great is making a minLevel or minCharCount to start the search. That way, when you have to make an expensive api call to get results you aren't making it when there's only 1 or 2 characters in the search bar. I know it's possible to just check the length of the string in the getResults method, but if it were built in it would be a lot smoother. Maybe adding it to the DOM something like...
<ion-auto-complete [dataProvider]="search" (itemSelected)="itemSelected($event)" [minLevel]="2"></ion-auto-complete>
That way it wouldn't even start searching for results until there is at least 2 characters in the search bar.

Hey thanks for the great work! And my apologies if this is a dupe of #4 and #5 .

I'm guessing due to the recent ionic update (2.1.0); boldprefix is not defined when loading the @AutoCompleteItem annotation. I am confused by the instructions in the readme. ionic 2.1 is using rc4 of Angualr2, and ngModule was introduced in rc5.

For now, I worked around this by commenting changing the code to the following in auto-complete-.item.componet.ts:

/**
 * Auto complete Item base class
 */
// @AutoCompleteItem({
//     template: defaultTemplate
// })
@Component({
    template: defaultTemplate,
    pipes: [BoldPrefix]
})

I realize this is an ugly hack and a more elegant solution should be pushed to the repository.
I'm still new to Ionic2/Angular2/Typescript, so I look forward to seeing how this solution could be improved.

I have spend a lot of time to find solution.
This closed issue helped me to understand that problem is in your plugin.
ionic-team/ionic-framework#10520

By the way All works good with browser and with android

Hi, thx for your component.

Can you help me figure out how i can move carret to the end of the searchbar input? I can't find answers in the component or official docs.