QML textInput元素中的自动完成和suggesstion

时间:2013-04-07 17:42:29

标签: c++ qt autocomplete qml pyside

我有一个像这样的QML textInput元素:

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 ++插槽)

我如何做这项工作?

2 个答案:

答案 0 :(得分:15)

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

我打赌它会完成这项工作。

修改

上面链接的代码有点复杂,需要C ++后端,所以我简化了它并制作了纯Qml示例应用程序,您可以使用,编辑一点并应用于您的需求。可以找到来源here。最重要的是:

  1. This implementation of SuggestionBox使用某种模型作为完成/建议内容的来源
  2. 每次用户点击项目时,都会发出 itemSelected(item)的信号
  3. Main component of application binds its LineEdit component to SuggestionBox
  4. 请注意,代码非常粗糙并且为了示例而编写。

答案 1 :(得分:1)

我一直在寻找类似的东西:一个围绕QML TextField构建的QML自动完成组件,而不是像问题中那样的低级,更灵活但又需要更多工作的TextInput。

由于找不到,我实现了它。如果有人想使用它:它是由MIT许可的,可以作为我正在开发的an application的一部分使用。您可以在src/qml/AutoComplete.qml中找到该组件,该应用程序可以用作用法示例。功能:

  • 以粗体突出显示自动完成的字符,例如在Google搜索中
  • 键绑定(使用箭头键导航,Return / Enter,Esc键关闭完成框,Esc Esc键取消焦点)
  • 目前使用简单的QStringList作为模型,该应用程序显示了如何在按下下一个键时使用实时SQL数据库查询更新模型
  • 大量记录的代码,因此它应该很容易适应

autocomplete component screenshot

让我知道它是否有用,然后我可以将其打包为Qt QPM package,甚至尝试使其成熟到足以添加到QML UI库KDE Kirigami中。