QT - multi-select - c++

Question

I would like to create a search-type text field in QT that can contain both standard text as well as what I would call "tags"... basically additional search terms that are individually highlighted and separated. I envision this looking like the multi-select in "Chosen" (Javascript library). http://harvesthq.github.com/chosen/
I have been unable to find anything similar through searching. It also seems that the standard QT text box types are not designed to have "sub-widgets".
It appears that QTextEdit supports HTML... that might be a possiblity... but the docs are not very clear to me as what is supported in terms of CSS (which I think would be required to get the desired formatting). http://doc.qt.io/qt-5/qtextedit.html#html-prop
Its funny... I got to the bottom of this submission page and realized I have to tag this (this is my first SO question)... This tag-adder box is almost exactly what I want!

Answer 1

There is no ready-to-use soultion that I know.
If I were to try implementing it, I would definitely use widget with layout, in which there are two types of child widgets: LineEdits (borderless to look like actual part of bigger widget) and buttons - code managing line edit changes would simply add new buttons before or after and if necesary splited linedit into tw with button between. This way is not interfering with qt programers intentions on how to use widgets and how to make them all fit together in one style.
If you want you can use custom widgets instead of buttons to provide remove icon.
As I wrote in my comment - if i have a bit more time I will try to make something like that myself.

Answer 2

Here is a very simple implementation of putting buttons in a QLineEdit as a user types, written in Python:
from PySide.QtCore import *
from PySide.QtGui import *
class Entry(QLineEdit):
def __init__(self):
QLineEdit.__init__(self)
self.buttons = []
self.backupText = ''
self.textEdited.connect(self.on_change)
self.layout = QHBoxLayout()
self.setLayout(self.layout)
self.layout.addStretch()
marginz = QLabel(' ')
marginz.show()
margin = marginz.width()
marginz.hide()
self.layout.setContentsMargins(margin, margin, margin, margin)
def on_change(self):
if self.text()[-1] == ' ' and not self.text().endswith(' '):
if len(self.text()) > len(self.backupText):
self.setText(self.text() + ' ')
self.buttons.append(QPushButton(self.text().split()[-1]))
self.layout.insertWidget(self.layout.count()-1, self.buttons[-1])
else:
self.setText(self.text()[0:-1])
self.buttons[-1].hide()
del self.buttons[-1]
self.backupText = self.text()
app = QApplication([])
window = QMainWindow()
window.setStyleSheet(
'QPushButton {border: 1px solid gray; background: lightgray; color: black;}')
entry = Entry()
window.setCentralWidget(entry)
window.show()
app.exec_()
It creates a QHBoxLayout and adds a button to it for each word you type, and takes the button away when you get rid of the word.
If you want to put a close button inside of each of the sub-widgets, you can make a custom widget for that too.
EDIT
As j_kubik's comment stated, systems with wide-margin buttons would cause the tag buttons to overlap the text a user is currently typing. I have modified the code to enforce the margins of the buttons inserted (with stylesheets), added an extra space for each space the user types, and set the QHBoxLayout's contentsMargins to be the same width as a space (""). Now the buttons will not overlap the text inserted.