sengirab/ngAutocomplete

Adding parent child autocomplete html side code

donajoshy opened this issue · 6 comments

Please add the code for parent child example

i added this code but child not working according to the parent id

Could you provide me your code?

public group1 = [
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'
)
];

after selecting one from parent, not get the value corresponding to parent id

It should be setting the children it has. And also emitting the chosen value. Could you provide me with console.log's?

NgAutocompleteComponent.html:3 ERROR TypeError: Cannot read property 'titleKey' of undefined
at ng-autocomplete.component.ts:123
at Array.forEach ()
at NgAutocompleteComponent.webpackJsonp.47.NgAutocompleteComponent.SetChildren (ng-autocomplete.component.ts:114)
at NgAutocompleteComponent.webpackJsonp.47.NgAutocompleteComponent.ListenToSelected (ng-autocomplete.component.ts:79)
at Object.eval [as handleEvent] (NgAutocompleteComponent.html:5)
at handleEvent (core.es5.js:11998)
at callWithDebugContext (core.es5.js:13467)
at Object.debugHandleEvent [as handleEvent] (core.es5.js:13055)
at dispatchEvent (core.es5.js:8614)
at core.es5.js:10770
View_NgAutocompleteComponent_1 @ NgAutocompleteComponent.html:3
DebugContext_.logError @ core.es5.js:13407
ErrorHandler.handleError @ core.es5.js:1080
(anonymous) @ core.es5.js:10774
schedulerFn @ core.es5.js:3647
SafeSubscriber.__tryOrUnsub @ Subscriber.js:242
SafeSubscriber.next @ Subscriber.js:189
Subscriber.next @ Subscriber.js:129
Subscriber.next @ Subscriber.js:93
Subject.next @ Subject.js:55
EventEmitter.emit @ core.es5.js:3621
webpackJsonp.70.CompleterComponent.SelectItem @ completer.component.ts:240
(anonymous) @ CompleterComponent.html:43
handleEvent @ core.es5.js:11998
callWithDebugContext @ core.es5.js:13467
debugHandleEvent @ core.es5.js:13055
dispatchEvent @ core.es5.js:8614
(anonymous) @ core.es5.js:9228
(anonymous) @ platform-browser.es5.js:2648
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.es5.js:3881
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
NgAutocompleteComponent.html:3 ERROR CONTEXT DebugContext
 {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}

untitled