QML文本输入元素中的自动完成和建议功能

Question

我有一个QML文本输入元素，就像这样：

TextBox.qml

FocusScope {
    id: focusScope
    property int fontSize: focusScope.height -30
    property int textBoxWidth: parent.width * 0.8
    property int textBoxHeight: 45
    property string placeHolder: 'Type something...'
    property bool isUserInTheMiddleOfEntringText: false
    width: textBoxWidth
    height: textBoxHeight

    Rectangle {
        width: parent.width
        height: parent.height
        border.color:'blue'
        border.width: 3
        radius: 0
        MouseArea {
            anchors.fill: parent
            onClicked: {
                focusScope.focus = true
                textInput.openSoftwareInputPanel()
            }
        }
    }
    Text {
        id: typeSomething
        anchors.fill: parent; anchors.rightMargin: 8
        verticalAlignment: Text.AlignVCenter
        text: placeHolder
        color: 'red'
        font.italic: true
        font.pointSize: fontSize
        MouseArea {
            anchors.fill: parent
            onClicked: {
                focusScope.focus = true
                textInput.openSoftwareInputPanel()
            }
        }

    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            focusScope.focus = true
            textInput.openSoftwareInputPanel()
        }
    }

    TextInput {
        id: textInput
        anchors {
            right: parent.right
            rightMargin: 8
            left: clear.right
            leftMargin: 8
            verticalCenter: parent.verticalCenter
        }
        focus: true
        selectByMouse: true
        font.pointSize: fontSize
    }



    Text {
        id: clear
        text: '\u2717'
        color: 'yellow'
        font.pointSize: 25
        opacity: 0
        visible: readOnlyTextBox ? false : true
        anchors {
            left: parent.left
            leftMargin: 8
            verticalCenter: parent.verticalCenter
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                textInput.text = ''
                focusScope.focus = true;
                textInput.openSoftwareInputPanel()
            }
        }
    }

    states: State {
        name: 'hasText'; when: textInput.text != ''
        PropertyChanges {
            target: typeSomething
            opacity: 0
        }
        PropertyChanges {
            target: clear
            opacity: 0.5
        }
    }

    transitions: [
        Transition {
            from: ''; to: 'hasText'
            NumberAnimation {
                exclude: typeSomething
                properties: 'opacity'
            }
        },
        Transition {
            from: 'hasText'; to: ''
            NumberAnimation {
                properties: 'opacity'
            }
        }
    ]
}

我想给这个文本框添加像谷歌搜索一样的自动完成和建议功能。自动完成从数据库获取数据，数据库通过pyside SLOT（或c++ slot）返回一个字典列表。

我该如何实现这项工作？

- Vahid Kharazi

Answer 1

请看这段代码：https://github.com/jturcotte/liquid/blob/master/qml/content/SuggestionBox.qml

我敢肯定它会完成工作。

编辑：

上述链接的代码有些复杂，需要 C++ 后端支持，因此我简化了它并制作了一个纯 Qml 示例应用程序，您可以进行调试、稍加修改并适用于您的需求。源代码可以在 这里 找到。最重要的是：

1. 这个SuggestionBox的实现使用某种模型作为其完成/建议内容的来源
2. 每当用户点击项目时，其信号itemSelected(item)将被发射
3. 应用程序的主要组件，将其LineEdit组件绑定到SuggestionBox

请注意，代码相当简陋，只是为了举例而编写。

- dant3

---

谢谢。这个建议非常好，但是建议不能用鼠标和键盘箭头选择。你能在你的代码中添加它吗？ - Vahid Kharazi

请查看我的评论@dant3。 - Vahid Kharazi

@varahram 请查看此次编辑。 - dant3

Answer 2

我正在寻找类似的东西：围绕QML TextField构建的QML自动完成组件，而不是像问题中那样使用更低级别、更灵活但也更耗费精力的TextInput。

由于我找不到，所以我实现了它。如果有人想使用它：它在我正在开发的一个应用程序的一部分中获得了MIT许可，并可用。您可以在src/qml/AutoComplete.qml中找到该组件，该应用程序可能作为使用示例。功能特点：

• 在自动完成的字符上加粗突出显示，就像谷歌搜索一样
• 键绑定（使用箭头键导航，按回车/输入键，按Esc关闭完成框，按Esc Esc取消聚焦）
• 目前使用简单的QStringList作为模型，并展示了如何在下一个键被按下时使用实时SQL数据库查询更新模型
• 代码有详细的文档说明，因此很容易进行适应

如果这对你有用，请告诉我，我可能会将其打包为Qt QPM package，甚至尝试使其成熟到足以添加到QML UI库KDE Kirigami中。

- tanius

---

嘿，你最终把这个发布成软件包了吗？ - Curtwagner1984

@Curtwagner1984 不，因为你是第一个表达对此感兴趣的人。但这只是一个QML文件，所以现在复制粘贴应该就可以了。 - tanius

问题在于它依赖于 Kirigami。 - Curtwagner1984

是的，我也一样，我很想使用那个，但对我来说，依赖于Kirigami是行不通的。 - MarcinJ