oferh/ng2-completer

Angular 2 autocomplete component

ng2-completer's Issues

Async remote service

I'd like to know your opinion regarding the the remote service.
I believe an async data service would be a better approach than a remote one.
The implementation to fetch and handle the data, probably, would be already done.

In my case, I had to come up with the solution:

this.dataService = this.completerService.local(this.searchData, 'name', 'name');

this.userFactory.loadAll().subscribe((data) => this.searchData.push(...data));

Apply class to child input for styling purposes

Is it possible to add a class to the child input that is generated inside of the ng2-completer directive? Obviously styling can be done without that but we have a project that will potentially use multiple bootstrap style themes and don't want to have to custom style the element for each theme.

Missing module problem ?

Hello I'm trying to install ng2-completer through npm.
Whenever I launch my app, I get this error :

node_modules/ng2-completer/bundles/src/ng2-completer.d.ts(1,30): error TS2307: Cannot find module './components/ng2-completer/completer-cmp'.

Is there something I overlooked ? I am running 1.2.0.

Thank you for your help !

No files

Hi When I install this module I dont have any files except package and readme.txt.

Can you check?

All suggestion boxes linked to the same dataService open when typing in one

Thank you for this wonderful helper!

I'm using an *ngFor and creating several ng2-completers all linked to the same dataService but using different ngModels. When editing one, the Searching... message only appears in the current field's list but once it's complete all the ng2-completer lists appear with the results instead of only the active one. I tried setting unique inputNames for all of them but the behavior continued.

Should I change my code to perhaps only instantiate a single ng2-completer when an item is clicked in preparation for editing? In that case, it'd be wonderful to be able to have the input element of the ng2-completer automatically focused (otherwise it also has to be clicked). Alternatively, is there a way to restrict the search results to just the active instance?

Unexpected value 'Ng2CompleterModule' imported by the module 'AppModule'

I'm trying to use your ng2-completer component inside of an ionic 2 project and I'm getting the following error.

`ngc error: Error: Unexpected value 'Ng2CompleterModule' imported by the module 'AppModule'
at C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\compiler\bundles\compiler.umd.js:14109:37
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\compiler\bundles\compiler.umd.js:14094:46)
at C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\compiler\bundles\compiler.umd.js:12936:58
at Array.forEach (native)
at OfflineCompiler.analyzeModules (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\compiler\bundles\compiler.umd.js:12935:21)
at CodeGenerator.codegen (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\compiler-cli\src\codegen.js:105:47)
at codegen (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\compiler-cli\src\main.js:7:81)
at Object.main (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\tsc-wrapped\src\main.js:30:16)
at Object. (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\compiler-cli\src\main.js:14:9)

[14:26:22] ngc error: Compilation failed

[14:26:22]
[14:26:22] bundle prod started ...
[14:26:22] Error: Could not resolve entry (.tmp/app/main.prod.js)
at C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules\rollup\dist\rollup.js:8602:28
at process._tickCallback (node.js:369:9)
[14:26:22] sass started ...
[14:26:24] sass finished in 1.65 s
[14:26:24] minify started ...
[14:26:24] cleancss started ...
[14:26:24] uglifyjs started ...
[14:26:24] Error: ENOENT: no such file or directory, open 'C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\www\build\main.js'
at Error (native)
at Object.fs.openSync (fs.js:549:18)
at Object.fs.readFileSync (fs.js:397:15)
at addFile (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules\uglify-js\tools\node.js:68:22)
at C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules\uglify-js\tools\node.js:79:17
at Array.forEach (native)
at Object.exports.minify (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules\uglify-js\tools\node.js:77:26)
at runUglifyInternal (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@ionic\app-scripts\dist\uglifyjs.js:34:19)
at runUglify (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@ionic\app-scripts\dist\uglifyjs.js:23:28)
at Object.uglifyjs (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@ionic\app-scripts\dist\uglifyjs.js:9:12)
[14:26:25] cleancss finished in 1.07 s
[14:26:25] minify finished in 1.07 s
[14:26:25] build prod finished in 6.66 s
`

I've been unsuccessful in getting it to work in my application so I cloned this sample ionic project and built it according to the instructions given on the front page.
run "npm install" from the project root.
Install the ionic CLI with "npm install -g ionic"
run the project in a browser with "ionic serve"

The project runs fine and everything in it works.

I then add the ng2-completer module using the instructions given here and when I try to run the project again I get the above error.

I've looked for quite a bit for a solution and found this similar issue.

Any help would be greatly appreciated

Bind selection to the object, not just to the search string.

Hey,

Is it possible to select the whole object and not just the string that identified it?

In the example searchStr is a string, so if I want to do something with the whole object that was selected, I need to go through the whole data provided to dataService and find which object was selected by filtering the whole list.

Mouse click doesn't select the item, Enter Key does!

As the title says, i see that happening in demo too.

Getting field value from serach result

Is Space or special character not allowed in completer input?

Hi @oferh
I want to have multiple words on the completer input with space delimited, my remote url supports the multiple words search. But when i hit space or comma in input field, i'm getting search result not found. Is there a workaround for this?

Update readme for rc5

Hi, you should update the readme with

import {CompleterCmp, CompleterService, COMPLETER_DATA_PROVIDERS} from 'ng2-completer';

@NgModule({
imports: [ ....],
declarations: [ CompleterCmp ],
providers: [ COMPLETER_DATA_PROVIDERS, CompleterService ]
],
bootstrap: [ ApplicationComponent ]
})

Or something similar, because directives and providers (in @component) will be removed in the next release of angular2 as explained here https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

Support extracting data from Object response

Hi!

I've just used ng2-completer for some day, but when my project require remote search, the data returned from service has many informations, such as:

{
  customers: [
   {
      name: 'user 1',
      age: 20
   },
   { 
      name: 'user 2',
      age: 21
   },
 ],
someObject: [],
someMoreObject: []


}

I just want to looking for data in "customer" array, could ng2-completer support this case?

Thank you!

npm download

Will you release your project to be downloaded using npm instead of cloning?

How to use ng-completer inside directive Form

Hello,

How to use input autocomplete by ng-completer inside formGroup, when I use ng-completer with formGroup it show error:
ngModel cannot be used to register form controls with a parent formGroup directive. Try using
formGroup's partner directive "formControlName" instead.

Please help me, Thanks!

Problem with empty input

Hi, there is problem if I press Enter in empty field

Here is the problem (completer-cmp.ts:158):

public keydownHandler(event: any) {
        if (event.keyCode === KEY_EN && this.results) {
            if (this.listCmp.currentIndex >= 0 && this.listCmp.currentIndex < this.results.length) {

When field is empty, it throws exception, because listCmp is undefined. I'd added one more condition like "if (this.listCmp && ... "

completerService call from constructor

@oferh

I have a question do we need to make completerService call always from constructor?
For example, from the demo completerService is called from AppComponent Constructor(), Can i call the service from different method?

Reason is the remote url (or even if i use custom data) has some parameter other than the search parameter(from completer input) , the parameter will be at appComponent which can be changed.

Since I'm calling the service from constructor, I'm not able to pass the additional parameter which is part of appcomponent. Please advise.

Clear selection when search changes

Is possible implement a clearSelected that clear the input if the content don't match with any value in the list of options

making the field required?

So i wanted to make the field required, i tried adding formControlName="address" and in formControls address: ['', Validators.required], but it does not work.

Am i missing anything?

Support for custom HTML and CSS

Currently the input box has a class of 'completer-input' specified, but I see no way to add my own css class to the input, like 'form-control' so it styles properly in bootstrap.

Any ideas?

Example Local Data Structure

Hello, so i have country .json as following

{
  "BD": "Bangladesh",
  "BE": "Belgium",
  "BF": "Burkina Faso",
  "BG": "Bulgaria",
  "BA": "Bosnia and Herzegovina",
  "BB": "Barbados",
  "WF": "Wallis and Futuna",
  "BL": "Saint Barthelemy",
.....

How can i use this data for a selector. this.dataService = completerService.local(this.searchData, ??, ??);

Use via Attribute

Opening the issue again #21 again, i'm still unable to use the autocomplete if i do like

<ion-input ng2-completer .....></ion-input>

Can you share an example how i would be able to do that with material design component?

Thanks

Update Importing Architecture to Make Full Use of NgModule

I propose refactoring the exports of ng2-completer so that instead of using

@NgModule({
    ...
    declarations: [
        ...
        CompleterCmp
    ],
    providers: [
        ...
        COMPLETER_DATA_PROVIDERS,
        CompleterService
    ],
    ....
})

developers will be able to import it as a module like so:

@NgModule({
    imports: [
        ...
        Ng2CompleterModule
    ],
    ....
})

As per the modular architecture recommended in RC5

CompleterService.remote().headers() not assignable error

Hey there,

I have some code for running a search query with some headers attached as following:

this.headers = this._users.createHeaders(); this.dataService = completerService.remote('http://localhost:3000/search?q=', 'title', 'title').headers(this.headers);

However, I keep getting an error: Type 'void' is not assignable to type 'CompleterData'. When I remove the .headers() attribute, it doesn't have a problem. I have noticed this with other attributes. Am I doing something wrong? I know the this.headers variable is a Headers object.

Thanks!

AOT support

Hello,
Does it support AOT, i tried to compile but i get the error Error: Unexpected value 'Ng2CompleterModule' imported by the module 'AppModule'

Can not search with text unicode

Hello,

I have a problem with text search in unicode, I use VietNamese language and search with text as "đầm", it can not sent correct text to api.

Please help me!
Thank you!

Hit server when filter text length is greater than 2 chars

Hi @oferh

Nice component!!

How do I configure to hit the server only when the filter text length is greater than 'n' characters. Also i need to add debounce time to wait before it hits.

Thanks,
Aniket

Google Places as Remote Url

Any idea's how to approach this for a remote url data completer?

https://maps.googleapis.com/maps/api/geocode/json?address=:query

i tried, this.dataService = completerService.remote(this.googleGeoCode, 'results.formatted_address', 'results.formatted_address'); without any luck.

Display all results if searchFields is empty

This feature is intended to be used mostly for RemoteData to prevent additional filtering of the results on the client side.
see issue #22

Question: How i can use post?

Questions:

1. How i can use ajax post query with remote url?
2. Is exits event on clear input ?
3. How set value on input ?

for example - i have 3 dropdown for geo: Country/Region/City

When i select City - need set value for Country and Region
If i clean input Region - I do not want to the value sent to the server

[Question] How can I use a bootstrap input field?

This project is very good, but all my application is created with inputs/forms of bootstrap 3.

How can I restore the css to use bootstrap? Also, how can I include this component into a form-group (bootstrap3)?

Thank you.

Access Data from Remote API With Auth Headers & User Input

I need a typeahead on my page that will access a remote service that returns a list of matching items. (what a typehead does). However, there are thousands of possible items that can be returned and I don't want to make the call to my service until the user has entered a minimum number of characters.

Once the minimum is reached, my service takes the user input and appends it to my get request to significantly reduce the number of items returned.

With the ng2-completer component it looks like I have to load every single potential item into my app when the page is initialized and I need to avoid that. I also need to be able to pass in authorization headers to my service and I can't see a way to do that with this component.

Is any of this possible using ng2-completer? It was with angucomplete-alt which is what I used to be using. There was an attribute called remote-api-handler that was tied to a method which could then make a request to my service and return only the data that matched my user input.

Form is submitted when we select an option from dropdown using enter key

I have a ng2-completer component inside my form. When we select an option using mouse click, model gets the selected value.
But if we use enter key to select the value, model does get the correct value but along with it even the form gets submitted.

Override Remote http.get in remote search?

Hello,
Is there a way to override this.http.get in remote search? i actually want to use data decryptor instead of .map((res: Response) => res.json()) or the best bet is to fork the repo and change it there.

Thanks.

How can i access to the input value?

In case the searching text of the input doesn't match any result, how can I access to that value from the component?

According to the readme, there is this string : private searchStr: string;
but when I use console.log(this.searchStr), I just get undefined

import { Component } from '@angular/core';
import { CompleterService, CompleterData } from 'ng2-completer';

@Component({
  selector: 'my-component',
  template: `<h1>Search color</h1>
            <ng2-completer [(ngModel)]="searchStr" [dataService]="dataService" [minSearchLength]="0"></ng2-completer>`
})
export class MyComponent {

  private searchStr: string;
  private dataService: CompleterData;
  private searchData = [
    { color: 'red', value: '#f00' },
    { color: 'green', value: '#0f0' },
    { color: 'blue', value: '#00f' },
    { color: 'cyan', value: '#0ff' },
    { color: 'magenta', value: '#f0f' },
    { color: 'yellow', value: '#ff0' },
    { color: 'black', value: '#000' }
  ];

  constructor(private completerService: CompleterService) {
    this.dataService = completerService.local(this.searchData, 'color', 'color');
  }
}

documentation for use with remote data service

I have this working successfully with my application, using the demo code with the local data service. Do you have any example of how to use it with a remote data service? I have a REST API to perform the search on a remote database that I'd like to use.

Error Module not already loaded loading "@angular/core"

I did all steps to implement the component, but when running I get this:

localhost/:148 Error: Error: Module not already loaded loading "@angular/core" as http://localhost:5555/node_modules/@angular/core/bundles/core.umd.
at Object.eval (http://localhost:5555/node_modules/ng2-completer/bundles/ng2-completer.js:76:19)
at webpack_require (http://localhost:5555/node_modules/ng2-completer/bundles/ng2-completer.js:30:30)
at Object.c (http://localhost:5555/node_modules/ng2-completer/bundles/ng2-completer.js:371:15)
at webpack_require (http://localhost:5555/node_modules/ng2-completer/bundles/ng2-completer.js:30:30)
at Object.eval (http://localhost:5555/node_modules/ng2-completer/bundles/ng2-completer.js:58:24)
at webpack_require (http://localhost:5555/node_modules/ng2-completer/bundles/ng2-completer.js:30:30)
at eval (http://localhost:5555/node_modules/ng2-completer/bundles/ng2-completer.js:50:18)
at eval (http://localhost:5555/node_modules/ng2-completer/bundles/ng2-completer.js:53:10)
at Object.eval (http://localhost:5555/app/dashboard/tdr/tdr-list.component.js:14:23)
at eval (http://localhost:5555/app/dashboard/tdr/tdr-list.component.js:65:4)
at eval (http://localhost:5555/app/dashboard/tdr/tdr-list.component.js:66:3)
at Object.eval (http://localhost:5555/app/dashboard/tdr/index.js:5:10)
at eval (http://localhost:5555/app/dashboard/tdr/index.js:10:4)
at eval (http://localhost:5555/app/dashboard/tdr/index.js:11:3)
at Object.eval (http://localhost:5555/app/dashboard/dashboard.routes.js:17:16)
at eval (http://localhost:5555/app/dashboard/dashboard.routes.js:29:4)
at eval (http://localhost:5555/app/dashboard/dashboard.routes.js:30:3)
at Object.eval (http://localhost:5555/app/dashboard/index.js:6:10)
at eval (http://localhost:5555/app/dashboard/index.js:10:4)
at eval (http://localhost:5555/app/dashboard/index.js:11:3)
at Object.eval (http://localhost:5555/app/app.routes.js:4:15)
at eval (http://localhost:5555/app/app.routes.js:16:4)
at eval (http://localhost:5555/app/app.routes.js:17:3)
at Object.eval (http://localhost:5555/app/main.js:7:20)
at eval (http://localhost:5555/app/main.js:28:4)
at eval (http://localhost:5555/app/main.js:29:3)
Evaluating http://localhost:5555/app/dashboard/tdr/tdr-list.component.js
Evaluating http://localhost:5555/app/dashboard/tdr/index.js
Evaluating http://localhost:5555/app/dashboard/dashboard.routes.js
Evaluating http://localhost:5555/app/dashboard/index.js
Evaluating http://localhost:5555/app/app.routes.js
Evaluating http://localhost:5555/app/main.js
Error loading http://localhost:5555/app/main.js

can't set css class

can't set css class

textSearching not display in first search

textSearching not display in first search

in secord and after - textSearching is display

component removed from the dom on backspace

Hi and thank you for an awesome, awesome component!
In case I've been missing something, in my app, the component is removed from the DOM when the last character is deleted
from the input field using the backspace key.
Is it to be expected and if yes, is there a way to prevent this behaviour? Otherwise, I'm happy to provide you with more info.

Regards,

Candide

Angular Universal Support?

Any plans to support universal support?

Using with mgechev/angular2-seed

I can't seem to get this to load using the mgechev/angular2-seed project.

Under paths I've added

 'ng2-completer': '${this.NPM_BASE}ng2-completer/bundles',

and packages section I added

 'ng2-completer': {
    main: 'ng2-completer.js',
    format: 'cjs'
  }

but I get the error that it can't find node_modules/ng2-completer/bundles.js so I tried setting the path to '${this.NPM_BASE}ng2-completer/bundles/ng2-completer.js' and I get the error

Module not already loaded loading "@angular/core" as       
http://localhost:5555/node_modules/@angular/core/bundles/core.umd.(…)`

Thanks for looking!

UPDATE

It seems to only error when I actually try to add the directives to a component.

import {
  CompleterCmp,
  CompleterService,
  CompleterData,
  COMPLETER_DATA_PROVIDERS} from 'ng2-completer';

@Component ({
  directives: [CompleterCmp],
  providers: [COMPLETER_DATA_PROVIDERS, CompleterService]
})

Not able to capture blur event

Is there any way to capture the blur event on ng2-completer component other than (blur) ?
I am able to capture focus event but not blur event.

Create a demo with material design css

Using material css like this?
Any idea's?

Thanks

Bump version dependency to angular 2.0.0

npm install breaks due to peerinvalid Peer [email protected] wants @angular/forms@^2.0.0-rc.6

with ng2 final, we can expect semantic versioning to their next releases.

http://angularjs.blogspot.jp/2016/09/angular2-final.html

Limit the number of search results

Is there a way to restrict the number of output entries?
If Completer finds 100 entries, then it overlaps the whole page in the browser.

arrow keys selection

as the title says, how to achieve selection using arrow keys?

material component error

Hello,
So i tried the following and i get an error with ng2-completer-md but not with ng2-completer-md in html.

                <ng2-completer-md [(ngModel)]="myData" [dataService]="dataRemote2"
                               [minSearchLength]="3" [placeholder]="'search country'"
                               [ngModelOptions]="{standalone: true}"
                               (selected)="onLocationSelected($event)"
                               [textSearching]="'Please wait...'">
                </ng2-completer-md>

/// as soon i change ng2-completer-md to ng2-completer it works...

                <p>Selected country: {{myData | json }}</p>

       private dataRemote2: RemoteData;
....
....
....
        this.dataRemote2 = completerService.remote(null, null, "formatted_address");
        this.dataRemote2.urlFormater(term => {
            return `https://maps.googleapis.com/maps/api/geocode/json?address=${term}`;
        });
        this.dataRemote2.dataField("results");

build error at ComponentRef

build error at ComponentRef is not generic for autocomplete.ts where you do private listCmp: ComponentRef = undefined;

VS 2015

Attribute

I am trying to use this package in IonicFramework so for input fields i have to use ion-input.

<ion-input [(ngModel)]="searchStr" [dataService]="dataService" [minSearchLength]="0" [ngModelOptions]="{standalone: true}"></ion-input>

but looks like i have to use <ng2-completer...</<ng2-completer> to make it work. Is it possible to set ng2-completer as an attr?

how not clear input after select item

how not clear input after select item?