Blackberry 10 Cascades - 向前搜索下拉列表+标记字段

Question

我的问题与Filipe Figueiredo的查询有关（参见：Blackberry 10 Cascades - Images inside Text Area）

我的Cascades BB10应用程序需要提前搜索下拉菜单，能够选择多个项目并显示为标记字段。外观和感觉和行为与BB10电子邮件作曲家相同＆＃34; To＆＃34;地址字段 - 但具有不同的数据（例如国家/地区名称）。

问题：

1. 使用Cascades组件/控件有没有办法做到这一点？ （FlowListLayout不符合确切要求）
2. 我们可以使用QML + javascript实现这一目标吗？
3. 或者有没有办法使用C ++和QML实现这个目标？
4. 是否有为Cascades采购自定义控件的组件市场？

我的发展停滞不前。请帮忙。

Answer 1

应该可以。这是原型。它不能很好地工作，但这是一个想法。这是它的样子：

代码（是的，它很糟糕。但它应该开箱即用）：

import bb.cascades 1.2

Page {
    Container {
        ListView {
            id: tagList
            dataModel: tagModel

            layout: FlowListLayout {
                headerMode: ListHeaderMode.None
            }
            preferredHeight: 200

            function itemType(data, indexPath) {
                return (data.add == 1 ? 'add' : '');
            }
            function mload(text) {
                myList.load(text);
            }
            function showDropDown() {
                myList.visible = true;
            }
            listItemComponents: [
                ListItemComponent {
                    type: "add"

                    Container {
                        id: myAdd
                        TextField {
                            id: searchBox
                            preferredWidth: 300
                            onTextChanging: {
                                myAdd.ListItem.view.mload(searchBox.text);
                            }
                            onFocusedChanged: {
                                if (focused)
                                    myAdd.ListItem.view.showDropDown();
                            }
                        }
                    }
                },
                ListItemComponent {
                    Container {
                        background: Color.create("#660000FF")
                        leftPadding: 10
                        rightPadding: 10
                        topPadding: 10
                        bottomPadding: 10
                        leftMargin: 10
                        bottomMargin: 10
                        Label {
                            id: country
                            textStyle.fontSize: FontSize.Medium
                            text: ListItemData.country
                        }
                    }
                }
            ]

            onTriggered: {
                //todo: make it possible to remove a tag
                console.log("item touched.. yay!")
            }

            attachedObjects: [
                ArrayDataModel {
                    id: tagModel
                }
            ]
        }

        ListView {
            id: myList
            visible: false
            dataModel: mdataModel
            preferredHeight: 400
            attachedObjects: [
                ArrayDataModel {
                    id: mdataModel
                }
            ]

            onTriggered: {
                var selected = dataModel.data(indexPath);
                var tmp = new Object();
                tmp.country = selected;
                tagModel.insert(tagModel.size() - 1, tmp);
                console.log("removing: " + (tagModel.size() - 1 ) + " at size " + tagModel.size())
                visible = false;
            }

            function load(text) {
                var cities = [ "Slovenia", "Italy", "Slovakia", "Croatia", "Sweden", "Norway", "Poland", "Finland", "Spain",
                    "Indonesia", "Ireland" ]
                var tmp = [];
                for (var i = 0; i < cities.length; i ++) 
                    if (cities[i].toLowerCase().indexOf(text.toLowerCase()) >= 0)
                        tmp.push(cities[i]);
                mdataModel.clear();
                mdataModel.insert(0, tmp);
            }
            function insertEdit() {
                var edit = new Object();
                edit["add"] = "1";
                tagModel.insert(tagModel.size(), edit);
            }
        }
    }
    onCreationCompleted: {
        myList.load("");
        myList.insertEdit(); // insert item with TextField
    }
}