在 SAPUI5 中使用 Key 过滤建议项

Question

我已经为 table 中的输入字段实现了一个建议项，并且工作正常。此外，我还实现了事件“SuggestionItemSelected”以获取建议项目的附加文本以显示代码的描述。

SuggestItemSelected 事件只有在我们 select 列表中的建议项目时才会触发，然后我们可以获得代码的文本 selected.

那么在不使用建议项的情况下直接在输入框输入数据，如何获取输入代码的文本呢？我知道我们可以通过读取“byId()”来获取输入字段的值，但不知道如何获取关联的文本。

我尝试使用 selected 键值过滤建议项，但它不起作用。请帮助过滤键值的建议项以获取它的关联文本。

建议项数组

Answer 1

我试了一下这些建议，看起来如果：

您打字速度非常快，并在建议打开前按回车键，未调用 onSuggestionItemSelected。
离开（鼠标点击其他地方）onSuggestionItemSelected 未被调用。

您可以简单地检查 getSelectedKey() 并使用“使用建议”之类的消息拒绝此用户输入。

总之，有一种方法可以根据建议项键的输入进行事后过滤；看我的例子。

但请记住 getSuggestionItems() returns 0 个项目，如果建议 http-request 仍在进行中。可悲的是 ui5 没有到位的承诺 api。

sap.ui.controller("view1.initial", {
onInit : function(oEvent) {
    const oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({
        rows : [
            { key: "1", col4 : "Value4" },
            { key: "2", col4 : "Value2" },
            { key: "3", col4 : "Value16" },
            { key: "4", col4 : "Value20" }
        ]
    });

    this.getView().setModel(oModel);
},

onChange: function(oEvent) {
    const input = oEvent.getSource()
    let selectedKey = input.getSelectedKey()
    if(!selectedKey){  
      var dataObject =
      selectedKey = input.getSuggestionItems()
      .map( (suggestionItem)=> suggestionItem.getBindingContext().getObject() )
      .find( (a)=> a.col4 === oEvent.getParameter("newValue")  );
      if(dataObject){
        selectedKey = dataObject.key
           console.log("found key:" + selectedKey)
      }else{
           console.warn("no matching key")
       }   
    }else{
       console.log("provided key:" + selectedKey)
    }
   
},
onSuggestionItemSelected: function(oEvent) {
    
}

});

sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

/* extra CSS classes here */

<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
<mvc:View controllerName="view1.initial" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc">
    <Input
            
            showSuggestion="true"
      change="onChange"
      suggestionItemSelected="onSuggestionItemSelected"
            suggestionItems="{/rows}">
            <suggestionItems>
                <core:Item text="{col4}" key="{key}" />
            </suggestionItems>
        </Input>
</mvc:View>
</script>

在 SAPUI5 中使用 Key 过滤建议项

Filter Suggestion Items using Key in SAPUI5

javascript

sapui5