2017-02-08 9 views
0

テキストフィールドのオートコンプリート機能を作成しようとしています。SAPUI5のsap.m.Inputの表題

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" displayBlock="true" controllerName="SaleHelper.controller.SimpleForm"> 
<Dialog id="AddOrderDialog" title="{i18n>AddOrderDialog_Title}"> 
    <buttons> 
     <Button class="closebtn" text="{i18n>close}" id="__button2" press="cancel"/> 
     <Button text="Ok" enabled="false"/> 
    </buttons> 
    <content> 
     <Input id="_txtCustomerName" placeholder="{i18n>customername}" 
     showSuggestion="true" suggest="suggest" suggestionRows="{/customerset}"> 
      <suggestionColumns> 
       <Column 
        hAlign="Begin" 
        popinDisplay="Inline" 
        demandPopin="true"> 
        <Label text="{i18n>customername}"/> 
       </Column> 
       <Column 
        hAlign="Center" 
        popinDisplay="Inline" 
        demandPopin="true" 
        minScreenWidth="Tablet"> 
        <Label text="{i18n>address}"/> 
       </Column> 
       <Column 
        hAlign="End" 
        popinDisplay="Inline" 
        demandPopin="true"> 
        <Label text=" {i18n>phoneno}"/> 
       </Column> 
      </suggestionColumns> 
      <suggestionRows> 
       <ColumnListItem> 
       <cells> 
        <Label text="{customername}"/> 
        <Label text="{phoneno}"/> 
        <Label text="{address}"/> 
       </cells> 
       </ColumnListItem> 
      </suggestionRows> 
     </Input> 
    </content> 
</Dialog> 
私のコントローラで

、私はモデルを作成し、ダイアログに設定します:

私の状況は私がsap.m.Inputテキストフィールドを含むダイアログ使用してXMLフラグメントを持っているということです
var dialog = this.getView().byId("AddOrderDialog"); 
     var dummyController = { 
      suggest: function(oEvent) { 
      } 
     }; 
     if (!dialog) { 
      dialog = new sap.ui.xmlfragment(this.getView().getId(), "SaleHelper.fragment.AddOrderDialog", dummyController); 
      var data = { 
        "customername": "A", 
        "phoneno": "0933644118", 
        "address": "96 CT" 
      }; 
      var AutoCompleteModel = new sap.ui.model.json.JSONModel(); 
      AutoCompleteModel.setData(data); 
      dialog.setModel(AutoCompleteModel); 
      var i18nModel = this.getView().getModel("i18n"); 
      dialog.setModel(i18nModel, "i18n"); 
     } 
     dialog.open(); 

このオートコンプリート機能を設定することはできません。私はハードテキストにハードコピーして、ハードテキストにテキストをコピーしようとしましたが、xmlフラグメント内のプロパティSuggestionRowsを削除しました。もちろん、モデルやソートからロードされた動的データセットが必要です。

<Input id="_txtCustomerName" placeholder="{i18n>customername}" 
     showSuggestion="true" suggest="suggest" > 
<suggestionRows> 
      <ColumnListItem> 
      <cells> 
       <Label text="harded-text"/> 
       <Label text="harded-text"/> 
       <Label text="harded-text"/> 
      </cells> 
      </ColumnListItem> 
     </suggestionRows> 

すべてのヘルプしてください、あなたは、コードの下に参照できる表形式の提案については

敬具

答えて

1

を:

XMLコード:

 <Input 
       id="productInput" 
       type="Text" 
       placeholder="Enter Product ..." 
       showSuggestion="true" 
       showTableSuggestionValueHelp="false" 
       suggestionRows="{/ProductCollection}"> 
       <suggestionColumns> 
        <Column 
         hAlign="Begin" 
         popinDisplay="Inline" 
         demandPopin="true"> 
         <Label text="Name"/> 
        </Column> 
        <Column 
         hAlign="Center" 
         popinDisplay="Inline" 
         demandPopin="true" 
         minScreenWidth="Tablet"> 
         <Label text="Product ID"/> 
        </Column> 
        <Column 
         hAlign="Center" 
         popinDisplay="Inline" 
         demandPopin="false" 
         minScreenWidth="Tablet"> 
         <Label text="Supplier Name"/> 
        </Column> 
        <Column 
         hAlign="End" 
         popinDisplay="Inline" 
         demandPopin="true"> 
         <Label text="Price"/> 
        </Column> 
       </suggestionColumns> 
       <suggestionRows> 
        <ColumnListItem> 
        <cells> 
         <Label text="{Name}"/> 
         <Label text="{ProductId}"/> 
         <Label text="{SupplierName}"/> 
         <Label text="{Price}"/> 
        </cells> 
        </ColumnListItem> 
       </suggestionRows> 
      </Input> 

JSコード:

var oInputJSON = new sap.ui.model.json.JSONModel(); 
      var Data = { 
        ProductCollection : [{ 
          Name   : 'a', 
          ProductId : '1', 
          SupplierName : 'ab', 
          Price  : '12' 
         },{ 
          Name   : 'b', 
          ProductId : '2', 
          SupplierName : 'ab', 
          Price  : '12' 
        }] 
       }; 
      oInputJSON.setData(Data); 
      this.getView().byId("productInput").setModel(oInputJSON); 
+0

完全に正しい。 JSONモデルを構文上間違って記述したのは私のせいです。ありがとう –

+0

Btw最初の列(名前)だけでなく、ProductId、Supplier Name..v..vなどの他の列でも検索できますか?あなたのコードに従って以来、私は名前だけで検索することができます。 もう一度ご協力いただきありがとうございます。 –