select component with objects

demo/src/app/pages/modules/select/select.page.html

@@ -87,6 +87,18 @@ <h4 class="ui header">Remote Lookup</h4>
         </div>
     </demo-example>
 
+    <demo-example [code]="exampleSelectObjectLookupTemplate">
+        <div info>
+            <h4 class="ui header">Object Lookup</h4>
+            <p>A select with objects</p>
+        </div>
+        <div result>
+            <example-select-object-lookup></example-select-object-lookup>
+            <br>
+            <p>A lookup function is used to match the initial value with one of the values in the option list. </p>
+        </div>
+    </demo-example>
+
     <sui-message class="info" [isDismissable]="false">
         <div class="header">Localization</div>
         <p>

demo/src/app/pages/modules/select/select.page.ts

@@ -162,6 +162,20 @@ const exampleSearchLookupTemplate = `
 </div>
 `;
 
+const exampleSelectObjectLookupTemplate = `
+<sui-select class="selection"
+            [(ngModel)]="selectedOption"
+            [optionsLookup]="optionsLookup"
+            labelField="name"
+            [isSearchable]="true"
+            #searchSelect>
+    <sui-select-option *ngFor="let o of searchSelect.filteredOptions" [value]="o"></sui-select-option>
+</sui-select>
+<div class="ui segment">
+    <p>Currently selected: {{ selectedOption | json }}</p>
+</div>
+`;
+
 @Component({
     selector: "demo-page-select",
     templateUrl: "./select.page.html"
@@ -433,6 +447,7 @@ let lookupFn:LookupFn<IOption, number> = (query, initial?) => {
     // Return a promise that resolves with a list of query results.
 }
 `;
+    public exampleSelectObjectLookupTemplate:string = exampleSelectObjectLookupTemplate;
 
 }
 
@@ -515,12 +530,32 @@ 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<IOption>(resolve =>
+                setTimeout(() => resolve(this._options.find(item => item.id === initial.id)), 500));
+        }
+
+        return new Promise<IOption[]>(resolve =>
+            setTimeout(() => resolve(this._options), 500));
+    }
+}
+
 export const SelectPageComponents = [
     SelectPage,
 
     SelectExampleStandard,
     SelectExampleVariations,
     SelectExampleInMenuSearch,
     SelectExampleTemplate,
-    SelectExampleLookupSearch
+    SelectExampleLookupSearch,
+    SelectObjectLookupComponent
 ];

src/modules/select/components/select.ts

@@ -108,7 +108,7 @@ export class SuiSelect<T, U> extends SuiSelectBase<T, U> 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)