sengirab / ngautocomplete Goto Github PK

I am having an issue where this is very slow on tablets. It causes the page to hang on loading for 10-15 seconds then when you try to open the box it can take 5 seconds before anything happens.

Has anyone had this issue before?. Or is this not designed for such large amounts of options? I have 1409.

Please publish an Ivy distribution. Thanks!

⠙ Generating browser application bundles (phase: setup)...Processing legacy "View Engine" libraries:
- ng-auto-complete [es2015/esm2015] ()
- @angular-material-extensions/input-counter [es2015/esm2015] (git://github.com/angular-material-extensions/input-counter.git)
Encourage the library authors to publish an Ivy distribution.

I am trying the get the array or data source from a http and assigning it to the the autoomplete component but it is showing empty values but I could console my data source which is asigned.

public users = [
CreateNewAutocompleteGroup(
'Select user',
'completer',
this.employees,
{titleKey: 'fullName', childrenKey: null}
),
];

ngOnInit() {
this.http.get("rest url").subscribe(
(res: Response) => {
console.log(res.json())
this.employees = res.json();
}
);
console.log(this.employees);
}

Not sure if I'm doing something wrong, but I am unable to use ngAutocomplete with 2 linked input entries and child elements.
The aim is to filter the second input values according to the choise of the first one.

Here is the error I'm getting in the console:

ERROR TypeError: Cannot read property 'titleKey' of undefined
    at VM3247 vendor.js:68871
    at Array.forEach (<anonymous>)
    at NgAutoCompleteComponent.push../node_modules/ng-auto-complete/fesm5/ng-auto-complete.js.NgAutoCompleteComponent.SetChildren (VM3247 vendor.js:68864)
    at NgAutoCompleteComponent.push../node_modules/ng-auto-complete/fesm5/ng-auto-complete.js.NgAutoCompleteComponent.ListenToSelected (VM3247 vendor.js:68806)
    at Object.eval [as handleEvent] (VM3256 NgAutoCompleteComponent.ngfactory.js:21)
    at handleEvent (VM3247 vendor.js:43361)
    at callWithDebugContext (VM3247 vendor.js:44454)
    at Object.debugHandleEvent [as handleEvent] (VM3247 vendor.js:44157)
    at dispatchEvent (VM3247 vendor.js:40820)
    at VM3247 vendor.js:42300

Here is my component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { CreateNewAutocompleteGroup, NgAutoCompleteComponent, SelectedAutocompleteItem } from 'ng-auto-complete';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})

export class EditorComponent implements OnInit {

  @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;

  _removables = [];

  public group = [
    CreateNewAutocompleteGroup(
        'Search / choose in / from list',
        'completer_one',
        [
            {
                title: 'Option 1', id: '1',
                children: [
                    {title: 'Option 1', id: '1'},
                    {title: 'Option 2', id: '2'}
                ]
            },
            {
                title: 'Option 2', id: '2',
                children: [
                    {title: 'Option 3', id: '3'},
                    {title: 'Option 4', id: '4'}
                ]
            },
            {
                title: 'Option 3', id: '3',
                children: [
                    {title: 'Option 5', id: '5'},
                    {title: 'Option 6', id: '6'}
                ]
            },
        ],
        {titleKey: 'title', childrenKey: 'children'},
        ''
    ),
    CreateNewAutocompleteGroup(
        'Search / choose in / from list',
        'completer_two',
        [
            {title: 'Option 1', id: '1'},
            {title: 'Option 2', id: '2'},
            {title: 'Option 3', id: '3'},
            {title: 'Option 4', id: '4'},
            {title: 'Option 5', id: '5'},
            {title: 'Option 6', id: '6'},
        ],
        {titleKey: 'title', childrenKey: null},
        'completer_one'
    )
  ];

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
      console.log();
  }

  Selected(item: SelectedAutocompleteItem) {
      console.log('its actually saying its selected', item);
  }

  RemoveSelected(item: SelectedAutocompleteItem) {
      if (item.item !== null) {
          this._removables.push(item.item);
      }

      this.completer.RemovableValues('completer_two', this._removables);
  }

}

And here my component.html:

<div>
    <ng-auto-complete (selected)="Selected($event)"
                     [classes]="['fifty']"
                     [group]="group"></ng-auto-complete>
    <div style="clear: both;"></div>
</div>

May you have the solution to my issue ?

Thank you.
Best regards,

Hendrik

I would like to ask how to change the name of the input?

@ViewChild() is a bit different in angular 8.

tried this but still not working.
@ViewChild(NgAutoCompleteComponent, { read: NgAutoCompleteComponent, static: false })

plus it forced to use at AppModule
@NgModule({
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

how can i bind ngAutocomplete with ngModel?
I have a model like this

let prod:Product = {
id:1,
name:"cookie",
item_supplies:[
{id:1,name:"test",quantity:5},
{id:2,name:"test1",quantity:44},
{id:3,name:"test2",quantity:22}
]
}

So i need a input (autocomplete) for every item_supply. How can i bind with ngModel?

I saw the function completer.ResetInput('completer') can clear the input, but I want to know is there any parameter can show a clear button? or I need to write it by myself?

hello!

Could you resolve my doubt, please?
Can i some way disable the component?

Congratulations for the initiave and thank you.

Cordially.

Roger C. Virtuoso.

don't open drop down on focus. After enter 2 characters should open based on match

Please add the code for parent child example

Hi i hope someone can help me?
I need modify the source. when the user write a name if doesn't exist i need keep the name written
and then if the user wants to update the record set the name if exist selected if not just show the name

----****************----------

the documentation say i need call setSelectItem function
so i need modify this function

SelectItem(item: AutocompleteItem | string) {
       let i: AutocompleteItem;
       if (typeof item === 'string') {
           i = this._items[item];
           this._DOM.selected = item;
       } 
///if doesn't exist just show the name of the client
      else {
           i = item;
           this._DOM.selected = SearchableAutoCompleteString(item.title, item.id);
       }

       this._completer = i.title;
       this._highlight = '';

       this.dropdown.Close(null, true);
       this.selected.emit({group: {key: this.group.key}, item: i});
   }

sorry for may english !!

I just implemented your newest version and noticed when I search on my mobile the search not update on keyUp or down.
If go to another input field it update, but this is not what I want.

Is possible to have multiple individual autocomplete components inside a table? On each row?

How can you create them based on an id or something similar?

Is there a way to set a default value so that one of the options is already selected onInit?

Hello there,

I am tryting to use ngAutocomplete in an angular7 project. After installing it, modifying the app.module.ts, app.component.ts and app.component.html, I am getting the following error:

Can't bind to 'classes' since it isn't a known property of 'ng-autocomplete'.

Dame for group.
When removing classes and group from
<ng-autocomplete (selected)="Selected($event)" [classes]="['']" [group]="group"></ng-autocomplete>

I am getting the error, that ng-aitocomplete is unknown.

Any help is greatly appreciated!

Regards
Dustin

I want to filter by titleKey when set searchLength is one character.
This issue is if I filter with character is 'i', 'd' or 'id' then the result response is full options of completer
Because I see you filter by return key.replace(/ /g, "_") + "id" + String(id);

Could you please make a new version with a sort change at function SearchableAutoCompleteString in ng-autocomplete.esm.js like this:

function SearchableAutoCompleteString(key, id) {
    if (id) {
        return key.replace(/ /g, "_") + "_id_" + String(id);
    }
    return key.replace(/ /g, "_");
}

This will support me and anyone just want to filter titleKey when set searchLength is one character so much. Thanks for your support. It's very important to me. Thanks again.

I need to install this package to my Project, which is created using vs2017..Please let me know how I can achieve this..

Hi,

is it possible to have 2 ng autocomplete on the same page when they are filled from http source ?

If yes, how can I do that ?

Great plugin by the way.

Thanks !

When autocomplete is inside a NgActiveModal, I am unable to use the SelectItem to set the default option. The completer is never initialized and I see the following error in the console

@ViewChild(NgAutocompleteComponent) public offerType: NgAutocompleteComponent;
public offerTypeOpts = [ CreateNewAutocompleteGroup( 'Select', 'offerType', [ {title: 'Standalone', id: 'Standalone'}, {title: 'ABN', id: 'ABN'} ], {titleKey: 'title', childrenKey: null }, '', false ), ];

this.offerType.SelectItem('offerType', 'Standalone');

I have tried putting the last line of code into ngOnInit, ngAfterContentInit, & ngAfterViewInit. Even when I wrote a custom function to check if the element was visible first, then run the SelectItem...it still throws the error

Is there a possibility to somehow overwrite the name and autocomplete html attribute values of the inner <input> element through a parameter?

hi
I use angular version 4.3.6 and do all guide you said in document but when run project get this error:
GET http://localhost:2634/node_modules/ng-auto-complete/ 403 (Forbidden) Error: Fetch error: 403 Forbidden Instantiating http://localhost:2634/node_modules/ng-auto-complete Loading http://localhost:2634/app/app.module.js Loading ../app at system.src.js:1479 at ZoneDelegate.invoke (zone.js:392) at Zone.run (zone.js:142) at zone.js:844 at ZoneDelegate.invokeTask (zone.js:425) at Zone.runTask (zone.js:192) at drainMicroTaskQueue (zone.js:602) at <anonymous>

I use your package and I have problem like this when I try to go to another routing.

This is my simple code.
@ViewChild(NgAutocompleteComponent) public completer: NgAutocompleteComponent;
public listProductName = [
{id:1, title:'aaaaaa'},
{id:2, title:'bbbbbb'}
];
public group = [
CreateNewAutocompleteGroup(
'Search / choose in / from list',
'completer',this.listProductName,
{titleKey: 'title', childrenKey: null}
),
];

This is Error.
ERROR Error: Uncaught (in promise): TypeError: Failed to execute 'removeEventListener' on 'EventTarget': 2 arguments required, but only 1 present.
TypeError: Failed to execute 'removeEventListener' on 'EventTarget': 2 arguments required, but only 1 present.
at HTMLInputElement.proto.(anonymous function) [as removeEventListener] (http://localhost:4200/polyfills.bundle.js:4440:50)
at NgDropdownDirective.ngOnDestroy (http://localhost:4200/vendor.bundle.js:47776:24)
at callProviderLifecycles (http://localhost:4200/vendor.bundle.js:11417:18)
at callElementProvidersLifecycles (http://localhost:4200/vendor.bundle.js:11386:13)
at callLifecycleHooksChildrenFirst (http://localhost:4200/vendor.bundle.js:11370:17)
at destroyView (http://localhost:4200/vendor.bundle.js:12711:5)
at callViewAction (http://localhost:4200/vendor.bundle.js:12860:13)
at execComponentViewsAction (http://localhost:4200/vendor.bundle.js:12772:13)
at destroyView (http://localhost:4200/vendor.bundle.js:12710:5)
at callViewAction (http://localhost:4200/vendor.bundle.js:12860:13)
at HTMLInputElement.proto.(anonymous function) [as removeEventListener] (http://localhost:4200/polyfills.bundle.js:4440:50)
at NgDropdownDirective.ngOnDestroy (http://localhost:4200/vendor.bundle.js:47776:24)
at callProviderLifecycles (http://localhost:4200/vendor.bundle.js:11417:18)
at callElementProvidersLifecycles (http://localhost:4200/vendor.bundle.js:11386:13)
at callLifecycleHooksChildrenFirst (http://localhost:4200/vendor.bundle.js:11370:17)
at destroyView (http://localhost:4200/vendor.bundle.js:12711:5)
at callViewAction (http://localhost:4200/vendor.bundle.js:12860:13)
at execComponentViewsAction (http://localhost:4200/vendor.bundle.js:12772:13)
at destroyView (http://localhost:4200/vendor.bundle.js:12710:5)
at callViewAction (http://localhost:4200/vendor.bundle.js:12860:13)
at resolvePromise (http://localhost:4200/polyfills.bundle.js:3490:31)
at resolvePromise (http://localhost:4200/polyfills.bundle.js:3461:17)
at http://localhost:4200/polyfills.bundle.js:3539:17
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:3120:31)
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:4090:33)
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:3119:36)
at Zone.runTask (http://localhost:4200/polyfills.bundle.js:2887:47)
at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:3297:35)
at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.bundle.js:3198:21)
at invokeTask (http://localhost:4200/polyfills.bundle.js:4122:14)

How to use angular form-validators with ng-autcomplete?

<ng-autocomplete [group]="reqReasonOpts" (selected)="selectOption($event, 'supportRequest.reason')" name="reason" required></ng-autocomplete>

simply adding the required attribute does not make the form invalid if no selection is made from the dropdown

It would be really helpful if this is included. I'm struggling to load the data asynchronously. Thanks!

ERROR ReferenceError: document is not defined
at Ng2AutoCompleteDirective.ngOnInit (xxxx)
at checkAndUpdateDirectiveInline (xxxx)
at checkAndUpdateNodeInline (xxxx)
at checkAndUpdateNode (xxxx)
at prodCheckAndUpdateNode (xxxx)
at Object.r.ɵvid.e [as updateDirectives] (xxxx)
at Object.updateDirectives (xxxx)
at checkAndUpdateView (xxxx)

The compiled JS code looks like this,

Ng2AutoCompleteDirective.prototype.ngOnInit = function () {
        // wrap this element with <div class="ng2-auto-complete">
        This line ==> this.wrapperEl = document.createElement("div");
        this.wrapperEl.className = "ng2-auto-complete-wrapper";
        this.wrapperEl.style.position = "relative";
        this.el.parentElement.insertBefore(this.wrapperEl, this.el.nextSibling);
......

This isn't breaking anything, just throwing errors on the server side.