Selector with filter or search option in SAPUI5 - select

Question

I am making a form and one part of it is to put the telephone number. I want to divide this input in two, on the one hand a selector with the prefixes of all the countries (I get the information from a json) and on the other hand a normal input with a restriction of numbers. The problem is that as there are many prefixes I would like to see if there is a way to filter the numbers with a select because with a comboBox I can filter the problem is that it gets out of the form and the sizes are not good, however with the select everything goes correctly. I have tried these three ways but, the first one I don't think is the best, then the second one I can't look for the result and the third one it overshoots the width of the cell. Any ideas for the select?
<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

You could use sap.ui.layout.form.SimpleForm to encapsulate your UI elements.
Then add 2 elements such as sap.m.Select and sap.m.MaskInput inside your form.
Here an example : https://jsbin.com/xotokavamo/2
Feel free to edit it to fit your use case.
<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>