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

我的问题与菲利佩·菲盖雷多的问题有关（见：）

我的Cascades BB10应用程序需要一个提前搜索下拉列表，能够选择多个项目并显示为标记字段。外观和行为与BB10 email composer的“收件人”地址字段相同，但数据不同（例如国家名称）

问题:

有没有一种方法可以使用级联组件/控件来实现这一点？ （FlowListLayout不符合确切要求）

我们可以使用QML+javascript实现这一点吗

<> LI>或者有C++和QML的方法来实现这一点吗？

是否有为级联采购定制控件的组件市场

---

我的发展停滞了。请帮忙。

这应该是可能的。这是一个原型。虽然效果不好，但这是个好主意。这就是它的样子：

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

导入bb.cascades 1.2
页面{
容器{
列表视图{
id:标记列表
dataModel:tagModel
布局：FlowListLayout{
headerMode:ListHeaderMode.None
}
首选身高：200
函数itemType（数据，indexath）{
返回（data.add==1？'add'：''）；
}
函数mload（文本）{
加载（文本）；
}
函数显示下拉列表（）{
myList.visible=true；
}
listItemComponents：[
ListItemComponent{
类型：“添加”
容器{
id:myAdd
文本字段{
id:搜索框
首选宽度：300
上下文更改：{
myAdd.ListItem.view.mload（searchBox.text）；
}
onFocusedChanged：{
如果（聚焦）
myAdd.ListItem.view.showDropDown（）；
}
}
}
},
ListItemComponent{
容器{
背景：颜色。创建（“660000FF”）
左侧填充：10
右侧填充：10
加总：10
底部填充：10
左边距：10
底边距：10
标签{
id:国家
textStyle.fontSize:fontSize.Medium
文本：ListItemData.country
}
}
}
]
反对：{
//todo:使删除标记成为可能
log（“触摸到的物品..耶！”）
}
附件：[
ArrayDataModel{
id:tagModel
}
]
}
列表视图{
id:myList
可见：假
数据模型：mdataModel
首选身高：400
附件：[
ArrayDataModel{
id:mdataModel
}
]
反对：{
选择的var=dataModel.data（indexPath）；
var tmp=新对象（）；
tmp.country=已选择；
tagModel.insert（tagModel.size（）-1，tmp）；
log（“删除：”+（tagModel.size（）-1）+“在大小上”+tagModel.size（））
可见=假；
}
函数加载（文本）{
var城市=[“斯洛文尼亚”、“意大利”、“斯洛伐克”、“克罗地亚”、“瑞典”、“挪威”、“波兰”、“芬兰”、“西班牙”，
“印度尼西亚”、“爱尔兰”]
var tmp=[]；
对于（变量i=0；i=0）
tmp.push（城市[i]）；
mdataModel.clear（）；
mdataModel.insert（0，tmp）；
}
函数insertEdit（）{
var edit=新对象（）；
编辑[“添加”]=“1”；
tagModel.insert（tagModel.size（），编辑）；
}
}
}
一旦创建完成：{
myList.load（“”）；
myList.insertEdit（）；//使用TextField插入项
}
}

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
    }
}