diff --git a/demo/src/app/pages/modules/select/select.page.html b/demo/src/app/pages/modules/select/select.page.html index dd86fb75e..dab4990e3 100644 --- a/demo/src/app/pages/modules/select/select.page.html +++ b/demo/src/app/pages/modules/select/select.page.html @@ -87,6 +87,18 @@

Remote Lookup

+ +
+

Object Lookup

+

A select with objects

+
+
+ +
+

A lookup function is used to match the initial value with one of the values in the option list.

+
+
+
Localization

diff --git a/demo/src/app/pages/modules/select/select.page.ts b/demo/src/app/pages/modules/select/select.page.ts index 84db911aa..ed5ee17aa 100644 --- a/demo/src/app/pages/modules/select/select.page.ts +++ b/demo/src/app/pages/modules/select/select.page.ts @@ -162,6 +162,20 @@ const exampleSearchLookupTemplate = ` `; +const exampleSelectObjectLookupTemplate = ` + + + +

+

Currently selected: {{ selectedOption | json }}

+
+`; + @Component({ selector: "demo-page-select", templateUrl: "./select.page.html" @@ -433,6 +447,7 @@ let lookupFn:LookupFn = (query, initial?) => { // Return a promise that resolves with a list of query results. } `; + public exampleSelectObjectLookupTemplate:string = exampleSelectObjectLookupTemplate; } @@ -515,6 +530,25 @@ export class SelectExampleLookupSearch { } } +@Component({ + selector:"example-select-object-lookup", + template: exampleSelectObjectLookupTemplate +}) +export class SelectObjectLookupComponent { + public selectedOption:IOption = { id: 2, name: "two" }; + private _options:IOption[] = [{ id: 1, name: "one" }, { id: 2, name: "two" }, { id: 3, name: "three" }]; + + public optionsLookup = async (query:string, initial:IOption) => { + if (initial != undefined) { + return new Promise(resolve => + setTimeout(() => resolve(this._options.find(item => item.id === initial.id)), 500)); + } + + return new Promise(resolve => + setTimeout(() => resolve(this._options), 500)); + } +} + export const SelectPageComponents = [ SelectPage, @@ -522,5 +556,6 @@ export const SelectPageComponents = [ SelectExampleVariations, SelectExampleInMenuSearch, SelectExampleTemplate, - SelectExampleLookupSearch + SelectExampleLookupSearch, + SelectObjectLookupComponent ]; diff --git a/src/modules/select/components/select.ts b/src/modules/select/components/select.ts index 16ca41050..f959acc07 100644 --- a/src/modules/select/components/select.ts +++ b/src/modules/select/components/select.ts @@ -108,7 +108,7 @@ export class SuiSelect extends SuiSelectBase implements ICustomValue this.drawSelectedOption(); } if (this.selectedOption == undefined) { - if (this.valueField && this.searchService.hasItemLookup) { + if (this.searchService.hasItemLookup) { // If the search service has a selected lookup function, make use of that to load the initial value. this.searchService .initialLookup(value)