Typeahead: adding support for nested properties and functions (typeaheadOptionField)

components/typeahead/readme.md

@@ -45,7 +45,7 @@ export class TypeaheadDirective implements OnInit {
   - `typeaheadMinLength` (`?number=1`) - minimal no of characters that needs to be entered before typeahead kicks-in. When set to 0, typeahead shows on focus with full list of options (limited as normal by typeaheadOptionsLimit)
   - `typeaheadWaitMs` (`?number=0`) - minimal wait time after last character typed before typeahead kicks-in
   - `typeaheadOptionsLimit` (`?number=20`) - maximum length of options items list
-  - `typeaheadOptionField` (`?string`) - name of field in array of states that contain options as objects, we use array item as option in case of this field is missing
+  - `typeaheadOptionField` (`?string`) - name of field in array of states that contain options as objects, we use array item as option in case of this field is missing. Supports nested properties and methods
   - `typeaheadAsync` (`?boolean`) - should be used only in case of `typeahead` attribute is array. If `true` - loading of options will be async, otherwise - sync. `true` make sense if options array is large.
   - `typeaheadLatinize` (`?boolean=true`) - match latin symbols. If `true` the word `súper` would match `super` and vice versa.
   - `typeaheadSingleWords` (`?boolean=true`) - break words with spaces. If `true` the text `"exact phrase" here match` would match with `match exact phrase here` but not with `phrase here exact match` (kind of "google style").

components/typeahead/typeahead-container.component.ts

@@ -108,9 +108,7 @@ export class TypeaheadContainerComponent {
   }
 
   protected hightlight(item:any, query:string):string {
-    let itemStr:string = (typeof item === 'object' && this._field
-      ? item[this._field]
-      : item).toString();
+    let itemStr:string = TypeaheadUtils.getValueFromObject(item, this._field);
     let itemStrHelper:string = (this.parent.typeaheadLatinize
       ? TypeaheadUtils.latinize(itemStr)
       : itemStr).toLowerCase();

components/typeahead/typeahead-utils.ts

@@ -38,4 +38,26 @@ export class TypeaheadUtils {
 
     return result;
   }
+
+  public static getValueFromObject(object: any, option: string):string {
+    if (!option || typeof object !== 'object') {
+      return object.toString();
+    }
+
+    if (option.endsWith('()')) {
+      let functionName = option.slice(0, option.length - 2);
+      return object[functionName]().toString();
+    }
+
+    let properties:string = option.replace(/\[(\w+)\]/g, '.$1')
+                                  .replace(/^\./, '');
+    let propertiesArray:Array<string> = properties.split('.');
+
+    for (let property of propertiesArray) {
+      if (property in object) {
+        object = object[property];
+      }
+    }
+    return object.toString();
+  }
 }

components/typeahead/typeahead.directive.ts

@@ -169,9 +169,7 @@ export class TypeaheadDirective implements OnInit {
   }
 
   public changeModel(value:any):void {
-    let valueStr:string = ((typeof value === 'object' && this.typeaheadOptionField)
-      ? value[this.typeaheadOptionField]
-      : value).toString();
+    let valueStr:string = TypeaheadUtils.getValueFromObject(value, this.typeaheadOptionField);
     this.ngControl.viewToModelUpdate(valueStr);
     (this.ngControl.control as FormControl).updateValue(valueStr);
     this.hide();
@@ -262,22 +260,8 @@ export class TypeaheadDirective implements OnInit {
   }
 
   private prepareOption(option:any):any {
-    let match:any;
-
-    if (typeof option === 'object' &&
-      option[this.typeaheadOptionField]) {
-      match = this.typeaheadLatinize ?
-        TypeaheadUtils.latinize(option[this.typeaheadOptionField].toString()) :
-        option[this.typeaheadOptionField].toString();
-    }
-
-    if (typeof option === 'string') {
-      match = this.typeaheadLatinize ?
-        TypeaheadUtils.latinize(option.toString()) :
-        option.toString();
-    }
-
-    return match;
+    let match:string = TypeaheadUtils.getValueFromObject(option, this.typeaheadOptionField);
+    return this.typeaheadLatinize ? TypeaheadUtils.latinize(match) : match;
   }
 
   private normalizeQuery(value:string):any {