Demos
Nav(Angular)
TreeView
Searching

Searching TreeViews (Angular)

Searching TreeViews is not trivial because of their hierarchical nature. Nodes typically reflect a context defined by in part by their parent nodes but also by additional content associated with the node.

For example, if a user searched the TreeView below for "Electronics", you may or may not want to include the child nodes in the results. Furthermore, if items contained detailed descriptions, you might want to add keywords to help in the search. So if a user typed for example "beard", you would probably want the "Trimmers/Shavers" node to be selected.

The AutoComplete control provides a good way to implement a search box to be used with the TreeView. In this sample, we build a flat searchArray with the full node paths and keywords and use that as an itemsSource for searching through the TreeView.

In addition to the 'itemsSource' and 'displayMemberPath' properties, we use the 'searchMemberPath' property to specify the name of the field that contains the keywords to include in the search.

For example, try typing 'beard', 'collect', or 'food' in the search box:

Learn about Wijmo | TreeView API Reference

This example uses Angular.

JavaScript
Angular
Vue
React
app.component.ts
index.html
app.component.html
app.data.ts
styles.css
Copy to CodeMine
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';

import '@angular/compiler';
import { Component, Inject, enableProdMode, ViewChild, AfterViewInit, ɵresolveComponentResources } from '@angular/core';

import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
import { WjInputModule, WjAutoComplete } from '@mescius/wijmo.angular2.input';
import { WjNavModule, WjTreeView } from '@mescius/wijmo.angular2.nav';
import { DataService, TreeItem } from './app.data';

class searchItem {
  item: any;
  path: string;
  keywords: string;
}

@Component({
  standalone: true,
  providers: [DataService],
  imports: [WjNavModule, WjInputModule, BrowserModule],
  selector: 'app-component',
  templateUrl: 'src/app.component.html',
})
export class AppComponent implements AfterViewInit {
  @ViewChild('theTree', { static: true }) theTree: WjTreeView;
  @ViewChild('searchAutoComplete', { static: true }) autocomplete: WjAutoComplete;
  treeData: TreeItem[];
  autoCompleteData: searchItem[];
  data: TreeItem[];

  constructor(@Inject(DataService) private dataService: DataService) {
    this.data = this.dataService.getData();
    this.autoCompleteData = this._getSearchList(this.data);
  }

  ngAfterViewInit() {
    this.theTree.itemsSource = this.data;
  }

  onSelectedIndexChanged(s: WjAutoComplete) {
    if (s.selectedItem) {
      this.theTree.selectedItem = s.selectedItem.item;
    }
  }

  private _getSearchList(items: TreeItem[], searchList?: null | searchItem[], path?: string | null): searchItem[] {
    // set defaults
    if (searchList == null) searchList = [];
    if (path == null) path = '';

    // add items and sub-items
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      searchList.push({
        item: item,
        path: path + item.header,
        keywords: item.keywords,
      });
      if (item.items) {
        this._getSearchList(item.items, searchList, path + item.header + ' / ');
      }
    }
    return searchList;
  }
}

enableProdMode();

// Resolve resources (templateUrl, styleUrls etc), After resolution all URLs have been converted into `template` strings.
ɵresolveComponentResources(fetch).then(() => {
  // Bootstrap application
  bootstrapApplication(AppComponent).catch((err) => console.error(err));
});
import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; import '@angular/compiler'; import { Component, Inject, enableProdMode, ViewChild, AfterViewInit, ɵresolveComponentResources } from '@angular/core'; import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; import { WjInputModule, WjAutoComplete } from '@mescius/wijmo.angular2.input'; import { WjNavModule, WjTreeView } from '@mescius/wijmo.angular2.nav'; import { DataService, TreeItem } from './app.data'; class searchItem { item: any; path: string; keywords: string; } @Component({ standalone: true, providers: [DataService], imports: [WjNavModule, WjInputModule, BrowserModule], selector: 'app-component', templateUrl: 'src/app.component.html', }) export class AppComponent implements AfterViewInit { @ViewChild('theTree', { static: true }) theTree: WjTreeView; @ViewChild('searchAutoComplete', { static: true }) autocomplete: WjAutoComplete; treeData: TreeItem[]; autoCompleteData: searchItem[]; data: TreeItem[]; constructor(@Inject(DataService) private dataService: DataService) { this.data = this.dataService.getData(); this.autoCompleteData = this._getSearchList(this.data); } ngAfterViewInit() { this.theTree.itemsSource = this.data; } onSelectedIndexChanged(s: WjAutoComplete) { if (s.selectedItem) { this.theTree.selectedItem = s.selectedItem.item; } } private _getSearchList(items: TreeItem[], searchList?: null | searchItem[], path?: string | null): searchItem[] { // set defaults if (searchList == null) searchList = []; if (path == null) path = ''; // add items and sub-items for (var i = 0; i < items.length; i++) { var item = items[i]; searchList.push({ item: item, path: path + item.header, keywords: item.keywords, }); if (item.items) { this._getSearchList(item.items, searchList, path + item.header + ' / '); } } return searchList; } } enableProdMode(); // Resolve resources (templateUrl, styleUrls etc), After resolution all URLs have been converted into `template` strings. ɵresolveComponentResources(fetch).then(() => { // Bootstrap application bootstrapApplication(AppComponent).catch((err) => console.error(err)); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo TreeView Searching</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="container-fluid"> <label for="search">Search: </label> <wj-auto-complete #searchAutoComplete [itemsSource]="autoCompleteData" [selectedIndex]="-1" [displayMemberPath]="'path'" [searchMemberPath]="'keywords'" (selectedIndexChanged)="onSelectedIndexChanged(searchAutoComplete)"> </wj-auto-complete> <wj-tree-view #theTree [displayMemberPath]="'header'" [childItemsPath]="'items'"></wj-tree-view> </div>
import { Injectable } from '@angular/core'; export class TreeItem { header: string; keywords?: string; items?: TreeItem[] } @Injectable() export class DataService { getData(): TreeItem[] { return [ { header: 'Electronics', items: [ { header: 'Trimmers/Shavers', keywords: 'beard hair' }, { header: 'Tablets', keywords: 'screen computer android ios facebook' }, { header: 'Phones', keywords: 'talk listen email facebook', items: [ { header: 'Apple' }, { header: 'Motorola' }, { header: 'Nokia' }, { header: 'Samsung' } ] }, { header: 'Speakers', keywords: 'music loudspeaker' }, { header: 'Monitors', keywords: 'screen color lcd oled' } ] }, { header: 'Toys', items: [ { header: 'Shopkins', keywords: 'animals collectibles' }, { header: 'Train Sets', keywords: 'models rail collectibles' }, { header: 'Science Kit', keywords: 'education physics chemistry' }, { header: 'Play-Doh', keywords: 'clay sculpt models' }, { header: 'Crayola', keywords: 'drawing painting wax chalk pencils' } ] }, { header: 'Home', items: [ { header: 'Coffee Maker', keywords: 'kitchen appliance drink' }, { header: 'Breadmaker', keywords: 'kitchen appliance food cooking' }, { header: 'Solar Panel', keywords: 'electric sun renewable energy' }, { header: 'Work Table', keywords: 'shop tools' }, { header: 'Propane Grill', keywords: 'food cooking barbecue meat' } ] } ]; } }
.wj-control { margin-bottom: 6px; } .wj-treeview { display:block; font-size: 120%; margin-bottom: 8px; padding: 6px; background: #f0f0f0; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } body { margin-bottom: 24pt; }
(function (global) { SystemJS.config({ transpiler: './plugin-typescript.js', typescriptOptions: { "target": "ES2022", "module": "system", "emitDecoratorMetadata": true, "experimentalDecorators": true, }, baseURL: 'node_modules/', meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'systemjs-plugin-css' }, '*.mjs': { format: 'esm' }, }, paths: { // paths serve as alias 'npm:': '' }, packageConfigPaths: [ '/node_modules/*/package.json', "/node_modules/@angular/*/package.json", "/node_modules/@mescius/*/package.json" ], map: { 'core-js': 'https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js', 'typescript': 'https://cdnjs.cloudflare.com/ajax/libs/typescript/5.2.2/typescript.min.js', "rxjs": "https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.1/rxjs.umd.min.js", 'systemjs-plugin-css': 'https://cdn.jsdelivr.net/npm/systemjs-plugin-css@0.1.37/css.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.angular2.chart.analytics": "npm:@mescius/wijmo.angular2.chart.analytics/index.js", "@mescius/wijmo.angular2.chart.animation": "npm:@mescius/wijmo.angular2.chart.animation/index.js", "@mescius/wijmo.angular2.chart.annotation": "npm:@mescius/wijmo.angular2.chart.annotation/index.js", "@mescius/wijmo.angular2.chart.finance.analytics": "npm:@mescius/wijmo.angular2.chart.finance.analytics/index.js", "@mescius/wijmo.angular2.chart.finance": "npm:@mescius/wijmo.angular2.chart.finance/index.js", "@mescius/wijmo.angular2.chart.hierarchical": "npm:@mescius/wijmo.angular2.chart.hierarchical/index.js", "@mescius/wijmo.angular2.chart.interaction": "npm:@mescius/wijmo.angular2.chart.interaction/index.js", "@mescius/wijmo.angular2.chart.radar": "npm:@mescius/wijmo.angular2.chart.radar/index.js", '@mescius/wijmo.angular2.chart.map': 'npm:@mescius/wijmo.angular2.chart.map/index.js', "@mescius/wijmo.angular2.chart": "npm:@mescius/wijmo.angular2.chart/index.js", "@mescius/wijmo.angular2.core": "npm:@mescius/wijmo.angular2.core/index.js", "@mescius/wijmo.angular2.gauge": "npm:@mescius/wijmo.angular2.gauge/index.js", "@mescius/wijmo.angular2.grid.detail": "npm:@mescius/wijmo.angular2.grid.detail/index.js", "@mescius/wijmo.angular2.grid.filter": "npm:@mescius/wijmo.angular2.grid.filter/index.js", "@mescius/wijmo.angular2.grid.grouppanel": "npm:@mescius/wijmo.angular2.grid.grouppanel/index.js", "@mescius/wijmo.angular2.grid.search": "npm:@mescius/wijmo.angular2.grid.search/index.js", "@mescius/wijmo.angular2.grid.multirow": "npm:@mescius/wijmo.angular2.grid.multirow/index.js", "@mescius/wijmo.angular2.grid.sheet": "npm:@mescius/wijmo.angular2.grid.sheet/index.js", '@mescius/wijmo.angular2.grid.transposed': 'npm:@mescius/wijmo.angular2.grid.transposed/index.js', '@mescius/wijmo.angular2.grid.transposedmultirow': 'npm:@mescius/wijmo.angular2.grid.transposedmultirow/index.js', "@mescius/wijmo.angular2.grid": "npm:@mescius/wijmo.angular2.grid/index.js", "@mescius/wijmo.angular2.input": "npm:@mescius/wijmo.angular2.input/index.js", "@mescius/wijmo.angular2.olap": "npm:@mescius/wijmo.angular2.olap/index.js", "@mescius/wijmo.angular2.viewer": "npm:@mescius/wijmo.angular2.viewer/index.js", "@mescius/wijmo.angular2.nav": "npm:@mescius/wijmo.angular2.nav/index.js", "@mescius/wijmo.angular2.directivebase": "npm:@mescius/wijmo.angular2.directivebase/index.js", '@mescius/wijmo.angular2.barcode.common': 'npm:@mescius/wijmo.angular2.barcode.common/index.js', '@mescius/wijmo.angular2.barcode.composite': 'npm:@mescius/wijmo.angular2.barcode.composite/index.js', '@mescius/wijmo.angular2.barcode.specialized': 'npm:@mescius/wijmo.angular2.barcode.specialized/index.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js', '@angular/core': 'npm:@angular/core/fesm2022/core.mjs', '@angular/core/primitives/signals': 'npm:@angular/core/fesm2022/primitives/signals.mjs', '@angular/core/primitives/event-dispatch': 'npm:@angular/core/fesm2022/primitives/event-dispatch.mjs', '@angular/common': 'npm:@angular/common/fesm2022/common.mjs', '@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs', '@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs', '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs', '@angular/http': 'npm:@angular/http/fesm2022/http.mjs', '@angular/router': 'npm:@angular/router/fesm2022/router.mjs', '@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs', }, // packages tells the System loader how to load when no filename and/or no extension packages: { "./src": { defaultExtension: 'ts' }, "node_modules": { defaultExtension: 'js' }, wijmo: { defaultExtension: 'js', } } }); })(this);