QT - multi-select

Question

I would like to create a text box of a search type in QT that can contain both standard text and what I would call "tags" ... basically additional search terms that are individually highlighted and separated. I guess this looks like a multi-select in the Javascript library. http://harvesthq.github.com/chosen/

I could not find anything like this when searching. It also seems that the standard QT text fields are not intended for "subcategories".

It seems that QTextEdit supports HTML ... which may be an opportunity ... but the documents are not very clear to me, like what is supported in CSS (which, I think, will be required to get the desired formatting), http: //doc.qt .io / qt-5 / qtextedit.html # html-prop

Its funny ... I got to this page of the presentation and realized that I need to tag this (this is my first SO question) ... This block of tag tags is almost exactly what I want!

Answer 1

Here is a very simple implementation of placing buttons in QLineEdit as custom 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 enter and discards the button when you get rid of that word.

If you want to place a close button inside each of the sub-widgets, you can also create your own widget.

EDIT

As noted in j_kubik's comment, systems with extended fields can cause button tags to overlap the text that the user is currently typing. I changed the code to force the fields of the inserted buttons (with style sheets), added extra space for each space that the user types, and set the QHBoxLayout contentsMargins to the same width as the space (" "). Now the buttons will not overlap the entered text.

Answer 2

There is no soul ready for use that I know. If I tried to implement it, I would definitely use a widget with a layout in which there are two types of child widgets: LineEdits (borderless to look like the actual part of a larger widget), and buttons - changes in editing the code control bar just added new buttons before or after, and if necessary, divide linedit by tw with a button in between. This method does not interfere with the intentions of qt programmers about how to use widgets and how to combine them in one style.

If you want, you can use custom widgets instead of buttons to provide a delete icon. As I wrote in my comment - if I have a little more time, I will try to do something similar to myself.