2017-02-08 7 views
0

Я пытаюсь создать функцию автозаполнения для текстового поля. Моя ситуация такова, что у меня есть, используя фрагмент XML-Диалог, который содержит текстовое поле sap.m.Input:Табличное предложение для sap.m.Input в SAPUI5

<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> 

В мой контроллер, я создаю модель и установить в диалоге:

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(); 

Я не могу настроить эту функцию автозаполнения. Я попытался сделать hardcode текст в suggestionRows жесткому тексту и удалить свойство SuggestionRows в xml-фрагменте, после чего он сработал. Но, конечно, мне нужен динамический набор данных, загруженный из модели или вида.

<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 Могу ли я искать не только первый столбец (имя), но и другие cols, такие как ProductId, имя поставщика..v..v? Поскольку после вашего кода я могу выполнять поиск только по имени. Еще раз спасибо за вашу помощь. –