value-changed, function variable name, callback function that is executed when dropdown is selected. e.g. myCallback, not myCallback

I don't see the different between the e.g and the not.

Can I use it like (value-changed)="myFunction(id)" or it's just function name only, no parameters sending with it is accepted?

And for value-property-name, what ever key name I assigned to this, it still bind the whole object to the ngModel. I just want to bind the key buildingID, not the whole object.

value-property-name="buildingID"

I have updated autocomplete module to 0.2.0 versions from 0.1.6 and i haven't seen sending OPTIONS request to server, i can't get data from server. Could you check and fix if it posible. At 0.1.6 version it has worked perfect

Hi, guys.

Is it possible to bind the source property to an Observable? It seems it only supports array or string.

My use case: I have a method in a service that does some async processing and then returns an Observable array. I want to bind the auto-complete to this method.

Thanks!

Hi, Im trying to use your library and I get this behavior,
when just pasting your code

<input auto-complete [(ngModel)]="myData" [source]="mySource" />

Into my html template I get this as the end result:

Which is an input witin an input, this makes things really difficult when I use a styled input like in this picture:

As you can see, this is really awkward,

When you you tab or click on the autocomplete field if you try to shift+tab to go to the previous field it just resets the autocomplete search, presumably because it's tabbing back to the initial autocomplete field and then creating a new autocomplete input each time.

If you import Ng2AutoCompleteModule into an NgModule that already imports BrowserModule (which will be pretty much any angular2 app). You get this error message, because i believe BrowserModule can only be imported once.

It seems like a better idea for Ng2AutoCompleteModule to import CommonModule instead.

The current design pretty much prohibits you from importing Ng2AutoCompleteModule into any child module.

The point i'm trying to make is confirmed in this stackoverflow post (look at accepted answer):
http://stackoverflow.com/questions/39414231/angular2-rc6-importing-browsermodule-in-my-submodules

thoughts?

Hi!
I have a problem. Now if I initialize the model object with FormGroup, I'm getting "[object] [object]"
Example: http://plnkr.co/edit/qGT7NoWKMdpl1Ue0RXxF?p=preview

My project's typescript transpilation fails due to the following error:

node_modules/ng2-auto-complete/dist/auto-complete.directive.ts(92,31): error TS7006: Parameter 'event' implicitly has an 'any' type.

Can you please remedy this by explicitly declaring a type? (event?: any)

I created 'AnalysisPickerComponent' which contains "ng2-auto-complete". Then I tried to include the 'AnalysisPickerComponent' inside my 'HomeComponent'.

Component nesting order: 'HomeComponent' -> 'AnalysisPickerComponent' -> 'ng2-auto-complete'

EXCEPTION: Error: Uncaught (in promise): Unexpected directive value 'undefined' on the View of component 'AnalysisPickerComponent'

Would it somehow be possible to get the auto complete to do the search based on first letter? I mean I have hundreds of data, so it is not so ideal when the search is not based on first letter. Tried looking into the package and do some modifications myself on the regex, but didn't succeed. Keep in bind that I'm a newbie, hehhe.

Any help would be appreciated!

I face a problem when placing a dropdown below the other.

Do you have any suggestions on this problem?

I'd like to use ng2-auto-complete with bootstrap's 'input-group' feature (class)

http://v4-alpha.getbootstrap.com/components/input-group/#basic-example

But after the input is wrapperd into another 2 elements, the styling is broken.

<div class="input-group">
  <span class="input-group-addon">@</span>
  <auto-complete style="...">
    <div class="auto-complete">
      <input class="form-control" ...>

Is there any workarund how could I make it work?

Hello,
Since i'm using angular2 material, it doesnt use regular input field so i have to use <md-input ...>
but as soon i click on the input i see the following error.

            <md-input auto-complete
                    [(ngModel)]="myData"
                    placeholder="Enter Address(min. 2 chars)"
                    [source]="googleGeoCode"
                    display-property-name="formatted_address"
                    path-to-data="results"
                    [ngModelOptions]="{standalone: true}"
                    min-chars="2"></md-input> {{model4 | json}}<br/><br/>

EXCEPTION: TypeError: Cannot read property 'instance' of undefinedBrowserDomAdapter.logError @ browser_adapter.js:85BrowserDomAdapter.logGroup @ browser_adapter.js:95ExceptionHandler.call @ exception_handler.js:66next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:75ZoneDelegate.handleError @ zone.js:336Zone.runTask @ zone.js:268ZoneTask.invoke @ zone.js:433
browser_adapter.js:85 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:85ExceptionHandler.call @ exception_handler.js:68next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:75ZoneDelegate.handleError @ zone.js:336Zone.runTask @ zone.js:268ZoneTask.invoke @ zone.js:433
browser_adapter.js:85 TypeError: Cannot read property 'instance' of undefined
    at AutoCompleteDirective.styleAutoCompleteDropdown (http://localhost:3000/main.bundle.js:1816:47)
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:16485:38)
    at Object.onInvokeTask (http://localhost:3000/vendor.bundle.js:47232:41)
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:16484:43)
    at Zone.runTask (http://localhost:3000/polyfills.bundle.js:16385:48)
    at ZoneTask.invoke (http://localhost:3000/polyfills.bundle.js:16553:34)
  -------------   Elapsed: 19 ms; At: Thu Sep 01 2016 01:03:40 GMT-0500 (CDT)   -------------  
    at Object.onScheduleTask (http://localhost:3000/polyfills.bundle.js:16058:23)
    at ZoneDelegate.scheduleTask (http://localhost:3000/polyfills.bundle.js:16462:50)
    at Zone.scheduleMacroTask (http://localhost:3000/polyfills.bundle.js:16402:40)
    at http://localhost:3000/polyfills.bundle.js:17461:30
    at setTimeout (eval at createNamedFn (http://localhost:3000/polyfills.bundle.js:1:0), <anonymous>:3:37)
    at AutoCompleteDirective.showAutoCompleteDropdown (http://localhost:3000/main.bundle.js:1875:9)
    at DebugAppView._View_Signup2._handle_click_11_1 (Signup.ngfactory.js:1998:49)
    at http://localhost:3000/vendor.bundle.js:65392:24
    at http://localhost:3000/vendor.bundle.js:21964:36
    at http://localhost:3000/vendor.bundle.js:33352:111
    at ZoneDelegate.invoke (http://localhost:3000/polyfills.bundle.js:16452:29)
    at Object.onInvoke (http://localhost:3000/vendor.bundle.js:47241:41)
    at ZoneDelegate.invoke (http://localhost:3000/polyfills.bundle.js:16451:35)
    at Zone.runGuarded (http://localhost:3000/polyfills.bundle.js:16359:48)
    at NgZoneImpl.runInnerGuarded (http://localhost:3000/vendor.bundle.js:47274:78)
    at NgZone.runGuarded (http://localhost:3000/vendor.bundle.js:31929:73)
    at HTMLElement.outsideHandler (http://localhost:3000/vendor.bundle.js:33352:79)
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:16485:38)
    at Zone.runTask (http://localhost:3000/polyfills.bundle.js:16385:48)
    at HTMLElement.ZoneTask.invoke (http://localhost:3000/polyfills.bundle.js:16553:34)

I have to following code as an example:
<input type="text" class="form-control" placeholder="Partner" auto-complete [source]="filters.merchants" (change)="filterOrders('merchant.id', $event.target.value)"/>

In my component I have a console.log in the filterOrders function, but it isn't triggered.
Seems like the (click) gets removed when creating the ng-auto-complete element?

I am using Ionic 2 RC0, which uses Angular 2. I'm not sure if this is an environmental issue or a problem with the component. One difference is that there is no system.config.js in the Ionic app that I can find.

Is there any way to overwrite the text "loading" while fetching data with remote source as HTTP URI string?

The fix for initial value is perfect, but the [(ngModel)] do not reflect the display value when the model is changed manully

I am getting this error.

Error TS2322 Build:Type 'EventEmitter<{}>' is not assignable to type 'EventEmitter'

Can you please help me with this.

First of all thank you for your auto-complete. really useful!!!!

However, I created the form in my app using the formControl so with input, I can not use ngModel but formControlName.

When I select an item from the dropdown, it's not updated on the input, still show whatever the initial formControlName were.

Is there anyway to make the autocomplete work with formControlName?

I implemented something like this:

  <input
    auto-complete
    [(ngModel)]="result"
    [source]="states"
    [display-property-name]="'name'"
    [value-changed]="search()"
    [min-chars]="3"
    class="form-control"
    placeholder="Search...">

The functionsearch()gets executed a 1000 times immediately. It should only be executed when I type or remove a letter, right?

The search function should update the source "states" every time I type in a letter.

Thanks for your support in advance!

Junus Ergin

We subscribe to component.valueSelected in auto-complete-directive.ts for example. I think the best practice is to also implement ngOnDestroy and .unsubscribe from observables there.

I fond out that if you press enter when no item is shown it throws an error.

How to reproduce:

1. Start typing something that doesn't return any result.
2. When an empty list is shown, press Enter.
3. An error is thrown.

How to make this work with Angular 2 final (2.0.1) ? thank you!

I got an error when import the module in AppModule:

Hello,
i am getting this error when i try to import the module.

code:

import {AutoCompleteDirective} from "ng2-auto-complete";
@Component({
    templateUrl: ....
    directives: [REACTIVE_FORM_DIRECTIVES, AutoCompleteDirective],
....
})

error

/project/node_modules/ng2-auto-complete/dist/auto-complete.directive.ts:1
import {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Hi,

Thanks for the job,

I tried to integrate the auto-complete, but I got this error :

Can't bind to 'source' since it isn't a known property of 'input'

 <input auto-complete formControlName="itemControl" [(ngModel)]="itemSelected" [source]="items" placeholder="Select an item"
      />

How can I do to ignore this error?

Thanks

How can I specify the default/initial ngModel values? Now if I initialize the model object, I'm getting "[object] [object]"

Hi. You are write good autocomplete. Please, could u set up type of variable
in file - ng2-auto-complete/dist/auto-complete.component.ts
on line 177 ( return function(callback: any, ms: any) )
asap if it possible, because my application cannot run without it

Is it possible to position the dropdown dynamically according the available height of the container (if the available height is less then dropdown should be displayed on top of the text box)?
It would have been better if there is property to specify the the max height for the dropdown.

Please guide me how to specify the width of auto complete relative to the container such as 100% or 80%

Also it be great if more documentation is provided

Here is my plunker ng2-auto-complete on plunker

Thanks

I have a WebAPI method that I call to get my autocomplete list. This method is protected by OAUTH2 authentication, so in order to call it I need to inject authentication credentials into the request header (to be specific, i need to add a Bearer token as an Authorization header) but ng2-auto-complete does not provide a way to do this. (unless I'm missing something?).

Would it be possible to provide a mechanism to modify http GET request headers before calling the URL?

(I have worked around this issue for now by removing the authorization requirement for my WebAPI method, so it's not a show-stopper for myself right now. However, I can see it being a show-stopper for other people).

I use your auto complete in form and using tab to select next input field.
I found that if I click on input the auto complete will show but if I go to next input field by pressing tab the auto complete will not work. Do you have any suggestion?

My question may be silly, but the readme.MD only explains how to use this directive on SystemJS, and since the angular-cli is using webpack to generate the builds I have no clue on how to use this directive.

I tried to:

1. Install it using npm install ng2-auto-complete --save and importing on my module
   Results on module not found
2. Add the mapping on angular-cli.json to "../node_modules/ng2-auto-complete/dist/ng2-auto-complete.umd.js"
   It throws an exception Uncaught TypeError: Cannot read property 'Injectable' of undefined

So, could you please help with the usage on Webpack ? (Once I understands how it works I can send a PR to update the readme)

When I type in the search box, I expect that if no match is found by auto-complete, I can still launch a search with the string I typed. This does not seem possible here, as ngModel is only updated when I select an item in the list.

I would expect the component to store what I typed, in order to be able to launch a "normal" search (like if autocomplete did not exist).

When using the auto complete, if you tab out of the field without entering any data the select input does not go away. (the loading box does). It does however work properly if you click out of the field. Clicking also works if you've already tabbed out of the field to another field.

possible to use the styling like in this demo, css here

Hello,

First of all, good job!

I tried to play with this module, it works well when the resource is local, or when the JSON retrieved is complete, however is it possible to make it work with the wikipedia api ?
https://en.wikipedia.org/w/api.php?action=opensearch&format=json&limit=5&search=angular
It basically returns an array.

API Info here: https://en.wikipedia.org/w/api.php

In advance, thanks a lot !

Hi,

I have a few question:

• How can I use a method that returns an Observable as the source? Is there an example?
• How can I customize the list? I guess '.ng2-auto-complete ul li'.

Hey guys,

is there any support forseen for textarea auto-complete support or should I contribute to the project?

Best Regards,

Stefan

The plunker example defined in the documentation is not working

TypeError: Zone.assertZonePatched is not a function
NgZoneImpl@https://npmcdn.com/@angular/core/bundles/core.umd.js:6197:13 
NgZone@https://npmcdn.com/@angular/core/bundles/core.umd.js:6346:30

How can I limit the number of items to show (with scrollable bar)? Is it possible?

Add possibility to use "min-chars" not only for remote data.

This behavior of cleaning the input in focus seems a little odd to me cause, in my opinion, if the goals is to mimic the input behavior extending it with new features, the text in the input should be keeped like in default input component.

Another issue that this behavior creates is that if you click in the input and the shown value is changed to empty string, the value is not propagated to the ngModel, leaving the component in a corrupted status if you leave the component without type anything.

I have forked the repo and changed to behave like a simple input field, and soon I'll submit a pull request.

I really like this component and hope you can accept this PR, even tough I know that this change the actual default behavior.

Hello,
I recently tried this auto-complete out, and I must give you fair warning, I am a total Angular2 noob, I tried out a few auto-complete to get one working, but I think this is pretty cool, only one slight issue I feel I have. My data source is a GET http. so I followed the google api example, and it works, but I feel its rather annoying to use :keyword as a fixed string, maybe you can make this some sort of a variable, that can be defined in the template or something more flexible.
Also if its already possible, would love to know how.

Cheers!

PS: I am using the latest (0.7.3)

not sure if its already possible, but would be awesome to have an option to enable input if its not part of the lookup source. (to add a new value)

I am using ng-auto-complete v0.11.4, with angular 2.0.0, as follows:

<input ng2-auto-complete name="row{{row.DisplayOrder}}Task2" 
[source]="getTaskListFunction(row)"
[(ngModel)]="row.TaskListItem"
min-chars="2"
[list-formatter]="taskAutoCompleteFormatter"
value-property-name="Id"
display-property-name="Value"
/>

I am defining this element inside a table of repeating tr rows using *ngFor. The table is contained within a form.

getTaskListFunction() returns a function, and this function, in turn, returns an Observable<TimesheetTaskListItem[]>.

row.TaskListItem is an instance of TimesheetTaskListItem object, defined as

class TimesheetTaskListItem { Id: number; Value: string; }

Everything works great, up to the point where I submit my form (calling WebAPI). Until I submit the form, the two-way binding to row.TaskListItem works as expected in that when first rendering the input element it shows the 'Value' property of the bound object, and when I select a different object from the auto-complete list it will correctly replace the instance referenced by row.TaskListItem with the object selected in the list and display the 'Value' property of this new object.

The binding gets screwed once I submit the form (to a WebAPI operation). After making this submission, the binding displays the contents of the input box as "[object Object]", which I interpret to mean that it is no longer respecting the display-property-name attribute. If I reload the data that my form is bound to then the binding remains corrupted, even if I load data for a different record.

Note that when I submit the form, I do not modify the row.TaskListItem object in any way and I do not modify any attributes of the input element.

I have tried my best to isolate where in my code or auto-complete's code this corruption first occurs but I am unable to diagnose any further than saving it is occurring at some point during/after the form submission. As for the resolution, I can only assume that the fix lies:

1. I'm doing something wrong in my definition of input element.
2. There is something wrong with the two-way binding in ng2-auto-complete.
3. This is a more general bug with angular2.

Have you got any ideas about the cause of this problem, and if not a fix, then any ideas on a workaround.

Thanks in advance

When I tab on textbox, not show, you can fix?

In case when from autocomplete i've received empty array and press "enter" button - i've got error in console "Cannot property name of undefined".
I think that this bug there https://gyazo.com/b10c25c6598cbceb989d7a71a8a38ca7