Tengo una matriz JSON anidada compleja y quiero filtrarla (propiedad de nombre) según lo que el usuario ingresa en la etiqueta de entrada y mostrarla como autocompletar. Una base de esto que he creado aquí en stackblitz haga clic aquí para ver el código . Tengo dos entradas de nombre " Tom " en dos objetos diferentes, por lo que cuando el usuario escribe Tom , debería aparecer dos veces en la función de autocompletar a partir de ahora solo se muestra una vez. Entonces, si presiono la letra "T", debería mostrarme todos los nombres que comienzan con "T". Aquí, en este caso, "Tom" dos veces si presiono " To " y si presiono solo " T ", entonces Tiffany y Tom 2 veces. ¿Podría por favor ayudarme aquí en el código? Cualquier ayuda es apreciada. ¡Muchas gracias!
También puede consultar el código a continuación, he actualizado el código que verifica en stackbliz https://stackblitz.com/edit/angular-ivy-k14se7
matches = []; ngOnInit() {} searchKeyup(ev) { var term: any = ev.target as HTMLElement; console.log("Value", term.value); this.matches = []; let content = [ { name: 'Robert', children: [], }, { name: 'Doug', children: [ { name: 'James', children: [ { name: 'John', children: [ { name: 'Tom', children: [], }, ], }, ], }, ], }, { name: 'Susan', children: [ { name: 'Tiffany', children: [ { name: 'Merry', children: [ { name: 'Sasha', children: [], }, { name: 'Tommy', children: [], }, ], }, ], }, ], }, ]; if(term.value.length > 0){ this.filter(content, term.value); } else { document.getElementById('list').innerHTML = ''; } if (this.matches.length > 0) { document.getElementById('list').innerHTML = this.matches.map(match => match.name).join(","); } else{ document.getElementById('list').innerHTML = ""; } } filter(arr, term) { arr.forEach((i) => { if (i.name.includes(term)) { this.matches.push(i); } if (i.children.length > 0) { this.filter(i.children, term); } }); console.log(this.matches); }Estabas en un buen camino. Lo único que falta en esta caminata recursiva es mantener el estado de los matches como este:
filter(arr, term, matches) { if (term.length == 0) { matches = []; document.getElementById('list').innerHTML = ''; } arr.forEach((i) => { if (i.name.includes(term)) { matches.push(i); } if (i.children.length > 0) { this.filter(i.children, term, matches); } }); console.log(matches); if (matches.length > 0) { document.getElementById('list').innerHTML = matches[0].name; } }