CODEWITHSUNDEEP
sapui5
softshipper
softshipper

Reputation: 34099

How to avoid typing leading zeros?

I have an input that supports suggestion

enter image description here

To search for a number, I have to type leading zeros first. How can I bypass it?

The code:

<Label text="Assign to" labelFor="pmRespPers"/>
<Input id="pmRespPers" type="Text" placeholder="Enter Person respons." showSuggestion="true"
    suggestionRows="{EAMMALFUNCTION>/I_PMContactCardEmployee}">
    <layoutData>
        <layout:GridData span="L7 M7 S12"/>
    </layoutData>
    <suggestionColumns>
        <Column hAlign="Begin" popinDisplay="Inline" demandPopin="true">
            <Label text="Number"/>
        </Column>
        <Column hAlign="Center" popinDisplay="Inline" demandPopin="true" minScreenWidth="Tablet">
            <Label text="Fullname"/>
        </Column>
    </suggestionColumns>
    <suggestionRows>
        <ColumnListItem>
            <cells>
                <Label text="{EAMMALFUNCTION>PersonnelNumber}"/>
                <Label text="{EAMMALFUNCTION>EmployeeFullName}"/>
            </cells>
        </ColumnListItem>
    </suggestionRows>
</Input>

Upvotes: 0

Views: 1329

Answers (2)

Rafael L&#243;pez Mart&#237;nez
Rafael L&#243;pez Mart&#237;nez

Reputation: 2265

Use the "suggest" event in the Input. It will be fire each time the user types in the Input.

As parameters of the event object, you get the "value". So in the event handler function modify the value as you want (adding the zeros) and filter the list of suggestions with the modified value.

You need to disable the default filtering as well to avoid confilcts. Here the snippet: https://jsbin.com/welimufado/edit?html,output

<Input id="productInput" type="Text" placeholder="Enter Product ..."
  showSuggestion="true" filterSuggests="false" suggestionItems="{/products}" suggest="onSuggest">
  <suggestionItems>
     <core:Item text="{Name}" />
  </suggestionItems>
</Input>

And the event handler

onSuggest: function(oEvent){
    var sValue = oEvent.getParameters().suggestValue;
    var sModifiedValue = "0000" + sValue;
    var oFilter = new sap.ui.model.Filter("Name", sap.ui.model.FilterOperator.StartsWith, sModifiedValue);
    oEvent.getSource().getBinding("suggestionItems").filter(oFilter);
}

Snippet with tabular suggestion: https://jsbin.com/wovovofece/edit?html,output

Upvotes: 0

softshipper
softshipper

Reputation: 34099

I've got the solution: 

    onSuggest: function(oEvent) {
        const oSuggestionRows = oEvent.getSource().getSuggestionRows();
        oSuggestionRows.map(a => {
            const oFirstLabel = a.getCells()[0];
            const iPersonnel = oFirstLabel.getText();
            const iPlConverted = parseInt(iPersonnel, 10);
            oFirstLabel.setText(iPlConverted);
            return oFirstLabel;
        });

Upvotes: 1

Related Questions