SAPUI5 中带有过滤器或搜索选项的选择器

Question

我正在制作一个表格，其中一部分是填写电话号码。我想将此输入分成两部分，一方面是带有所有国家/地区前缀的选择器（我从 json 获取信息），另一方面是带有数字限制的普通输入。问题是，由于有很多前缀，我想看看是否有办法用选择过滤数字，因为使用组合框我可以过滤问题是它脱离了表格并且尺寸不好，但是选择一切正常。我已经尝试了这三种方法，但是第一种方法我认为不是最好的，第二种方法我找不到结果，第三种方法超出了单元格的宽度。对选择有什么想法吗？

<VBox>
    <Label class="label" text="{i18n>Phone}" required="true"/>
    <HBox>
        <SearchField id="prefix" placeholder="Prefijo" enableSuggestions="true" search=".onSearch" suggest=".onSuggest" suggestionItems="{ path: 'country>/Dato' }">
            <SuggestionItem text="{country>prefix}" key="{country>code}"/>
        </SearchField>
     <!--<Select id="prefix" items="{ path: 'country>/Dato' }">
            <core:ListItem key="{country>code}" text="{country>prefix}"/>
         </Select>-->
     <!--<ComboBox id="prefix" class="input" width="30%" required="true" items="{ path: 'country>/Dato' }">
            <core:ListItem key="{country>code}" text="{country>prefix}"/>
         </ComboBox>-->
                                            
         <Input id="phone" placeholder="{i18n>Phone}"  value="" class="input phone" type="Tel" required="true" maxLength="10" liveChange="handleLiveChange"></Input>
    </HBox>
    <layoutData>
        <l:GridData span="L6 M6 S12"/>
    </layoutData>
</VBox>

Answer 1

您可以使用 sap.ui.layout.form.SimpleForm 来封装您的 UI 元素。 然后在表单中添加 2 个元素，例如 sap.m.Select 和 sap.m.MaskInput。

这里是一个例子：https://jsbin.com/xotokavamo/2

随意编辑它以适合您的用例。

<script>
        
      var oForm = new sap.ui.layout.form.SimpleForm({
        layout: "ResponsiveGridLayout",
        editable: true
      }); 
      
      var oLabel = new sap.m.Label({text: "Phone"});
      var oInput = new sap.m.Input({placeholder: "Enter phone number"});
      var oMaskInput = new sap.m.MaskInput({placeholderSymbol: "_", placeholder: "Enter a 10 digit number"})
      var oSelect = new sap.m.Select({items: [
        new sap.ui.core.Item({text:"+33"}),
        new sap.ui.core.Item({text:"+81"}),
      ]});
      var oHBox = new sap.m.HBox({
        items: [oSelect, oMaskInput]
      })
      
      oForm.addContent(oLabel);
      oForm.addContent(oHBox);
    
      
      oForm.placeAt("content");
        
    </script>