Search code examples
python-3.xpyqt5pyside2

How can I make modern search bar in PySide2?


I was making my own web browser until I realized that making a searchbar was a difficult task. I tried removing the title bar, but it didn't work out as expected because of pyside2 limitations. Then, I made my own searchbar but it wasn't interactive and the design was awful. So, I was looking around to see how I can make a draggable searchbar without a titlebar with stylesheets included and I found no recourses online. Therefore, StackOverflow was my last thought on how I can resolve and ask for information about this issue. Please leave any comments if I made any mistakes, Thank you! :D

microsoft-edge-inspiration

import sys
from PySide2.QtGui import *
from PySide2.QtCore import *
from PySide2.QtWidgets import *
from PySide2.QtWebEngine import *
from PySide2.QtWebEngineWidgets import *

class BrowserEngine(QWidget):
    def __init__(self, *args, **kwargs):
        super(BrowserEngine, self).__init__()
        self.webview = QWebEngineView(self)
        self.webview.load("https://www.duckduckgo.com")
        self.setMinimumSize(800, 600)
        
        self.mainLayout = QVBoxLayout()
        self.mainLayout.addWidget(self.webview)
        self.mainLayout.setContentsMargins(0, 0, 0, 0)
        self.setLayout(self.mainLayout)

class BrowserWindow(QMainWindow):
    def __init__(self, *args, **kwargs):
        super(BrowserWindow, self).__init__()
        self.setWindowTitle("DuckDuckGo")
        self.widget = BrowserEngine()
        self.setCentralWidget(self.widget)

if (__name__ == '__main__'):
    app = QApplication(sys.argv)
    module = BrowserWindow().show()
    sys.exit(app.exec_())

Solution

  • Use QlineEdit and setPlaceHolderText, if you want some effects to use like google search completer, use QCompleter. Hope it helps you. As far as I come across, there is nothing called as search bar option in pyqt5.