diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html
index 249039c73..7314e1639 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html
@@ -190,12 +190,22 @@
                                     <h6 style="margin: 12px;padding:10px !important;">Trading Product {{l+1}}</h6>
                                     <div fxLayout="row nowrap" fxLayoutGap="2px" fxLayoutAlign="start none">
                                         <mat-form-field style="width: 45%">
+                                            <div>
+                                                <input matInput list="products" placeholder="Trading Product Name" formControlName="trade_product_name"/>
+                                                <datalist id="products">
+                                                    <option *ngFor="let pm of m_tradingProducts"
+                                                    [value]="pm.name">{{
+                                        pm.name }}<option>
+                                                </datalist>    
+                                            </div>
+                                        </mat-form-field>
+                                        <!--<mat-form-field style="width: 45%">
                                             <mat-select placeholder="Trading Product Name" formControlName="trade_product_name">
                                                 <mat-option>Select</mat-option>
                                                 <mat-option *ngFor="let pm of m_tradingProducts" [value]="pm.name">{{
                                                     pm.name }}</mat-option>
                                             </mat-select>
-                                        </mat-form-field>
+                                        </mat-form-field>-->
                                         <!--<mat-form-field style="width: 100%">
                                             <input matInput placeholder="Trade Product Name" formControlName="trade_product_name">
                                         </mat-form-field>-->
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
index 29da1073e..28034285f 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
@@ -216,13 +216,16 @@
                                                     <input matInput placeholder="Trade Product Name" formControlName="trade_product_name">
                                                 </mat-form-field> -->
                                                             <mat-form-field style="width: 45%">
-                                                                <mat-select placeholder="Trading Product Name"
-                                                                    formControlName="trade_product_name">
-                                                                    <mat-option *ngFor="let pm of m_tradingProducts"
+                                                                <div>
+                                                                    <input matInput list="products" placeholder="Trading Product Name" formControlName="trade_product_name"/>
+                                                                    <datalist id="products">
+                                                                        <option *ngFor="let pm of m_tradingProducts"
                                                                         [value]="pm.name">{{
-                                                            pm.name }}</mat-option>
-                                                                </mat-select>
+                                                            pm.name }}<option>
+                                                                    </datalist>    
+                                                                </div>
                                                             </mat-form-field>
+                                                            
                                                             <mat-form-field style="width: 45%">
                                                                 <input matInput placeholder="Supplier Name"
                                                                     formControlName="trade_supplier_name">