自動完成和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

注意，代碼是相當粗糙，例如清酒寫的。