javascript - 在 SAPUI5 中使用 Key 过滤建议项

Question

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

仅当我们从列表中选择建议的项目时才会触发 SuggestItemSelected 事件，然后我们可以获得所选代码的文本。

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

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

建议项数组

标签： javascriptsapui5

Answer 1

我对这些建议进行了一些尝试，看起来像：

• 您键入非常快并在建议打开之前按 Enter 键，不会调用 onSuggestionItemSelected。
• 离开（鼠标单击其他地方） onSuggestionItemSelected 未被调用。

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

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

但请记住，getSuggestionItems()如果建议 http-request 仍在进行中，则返回 0 个项目。可悲的是 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>