Search within a ComboBoxItem

[SimonF]

Hi there,
we are trying to build a search for different views. Each view has a title, icon and description.
If the user is typing we want to display the current matches, but the user should also have the ability to enter a word and start a search to see the result page. If the user directly selects an item and hit enter, the view should be opened.

This example nearly matches our use-case, but if you type "add" and hit enter the first result will get selected and will be sent as input to the server insted only the entered words.
I know this is the documented behaviour.
Is there any useable workaround to get this to work? Maybe a flag we can set that after an input the selection is not set to to the first record of the valuemap?

code to try it out by yourself

isc.DynamicForm.create({
    ID: "testForm",
    width: 500,
    "saveOnEnter": true,
    "submit": function () {
        console.log(this.getItem("itemName").getSelectedRecord())
    },
    items: [{
            name: "itemName",
            title: "Search",
            editorType: "ComboBoxItem",
            valueField: "itemID",
            "textMatchStyle": "substring",
            "allowEmptyValue": true,
            "addUnknownValues": true,
            "selectOnFocus": true,
            optionDataSource: "supplyItem",
            width: 250,
            pickListCellHeight: 50,
            pickListProperties: {
                canHover: true,
                showHover: true,
                cellHoverHTML: function (record) {
                    return record.description ? record.description : "[no description]";
                },
                formatCellValue: function (value, record, field, viewer) {
                    var descStr = record.description ? record.description : "[no descripton]";
                    var styleStr = "font-family:arial;font-size:11px;white-space:nowrap;overflow:hidden;";
                    var retStr = "<table>" +
                        "<tr><td ><span style='" + styleStr + "width:170px;float:left'>" + record.itemName + "<span></td>" +
                        "<td align='right'><span style='" + styleStr + "width:50px;float:right;font-weight:bold'>" + record.unitCost + "<span></td></tr>" +
                        "<tr><td colSpan=2><span style='" + styleStr + "width:220px;float:left'>" + descStr + "</span></td></tr></table>";
                    return retStr;
                }
            }
        }
    ]
});

Best regards

[Isomorphic]

The entered words are available via getEnteredValue(), so you can simply retrieve them and use them instead of the value from the valueMap / optionDataSource.

[SimonF]

But if the user types "add" and hit "enter" automatically the first selection of the picklist if used. So getEnteredvalue() does not return the value "add" but returns the text of the selected record.
Is there a chance/workaround to get the user-typed value "add" if the user types "add" and hit enter?

Console:

isc.DynamicForm.create({
    ID: "testForm",
    width: 500,
    "saveOnEnter": true,
    "submit": function () {
        console.log(this.getItem("itemName").getEnteredValue());
        console.log(this.getItem("itemName").getSelectedRecord())
    },
    items: [{
            name: "itemName",
            title: "Search",
            editorType: "ComboBoxItem",
            valueField: "itemID",
            "textMatchStyle": "substring",
            "allowEmptyValue": true,
            "addUnknownValues": true,
            "selectOnFocus": true,
            optionDataSource: "supplyItem",
            width: 250,
            pickListCellHeight: 50,
            pickListProperties: {
                canHover: true,
                showHover: true,
                cellHoverHTML: function (record) {
                    return record.description ? record.description : "[no description]";
                },
                formatCellValue: function (value, record, field, viewer) {
                    var descStr = record.description ? record.description : "[no descripton]";
                    var styleStr = "font-family:arial;font-size:11px;white-space:nowrap;overflow:hidden;";
                    var retStr = "<table>" +
                        "<tr><td ><span style='" + styleStr + "width:170px;float:left'>" + record.itemName + "<span></td>" +
                        "<td align='right'><span style='" + styleStr + "width:50px;float:right;font-weight:bold'>" + record.unitCost + "<span></td></tr>" +
                        "<tr><td colSpan=2><span style='" + styleStr + "width:220px;float:left'>" + descStr + "</span></td></tr></table>";
                    return retStr;
                }
            }
        }
    ]
});

Best regards

[Isomorphic]

We'd recommend just continuously capturing the entered text every keypress event, or perhaps on change.