自动完成和QML为textInput元素

Question

宝贵意见我有一个这样的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' 
      } 
     } 
    ] 
} 

我要添加自动完成建议像谷歌搜索到该文本框中。 Autocomple从数据库和数据库中获取数据返回由pyside SLOT（或C++插槽）生成的字典列表。

我该怎么做这项工作？

Answer 1

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

我打赌它会做的工作。

编辑：该链接上面是有点复杂，需要C++后端，所以我简化它，由纯设为Qml示例应用程序，你可以玩，编辑一点，适用于您的需求

代码。来源可以找到here。最重要的事情有：

1. 使用某种模型This implementation of SuggestionBox因为它的源完成/提示的东西
2. 其信号itemSelected（项目）将每次用户点击emited上项目
3. Main component of application是binds its LineEdit component to SuggestionBox

注意，代码是相当粗糙，例如清酒写的。