Add Search box in webpage

Frappe Framework
1

Hi! I want to add search box like available on desk. Like here it is Subject for notice

Screenshot from 2023-11-23 16-02-57
Screenshot from 2023-11-23 16-02-571838×890 86.2 KB

I aim to add the functionality of search on webpage. Any help is appreciated.

Notice 1
Notice 11804×1007 64.4 KB

2

Please create a web page in frappe and refer to the code below as a reference.

<html>
<head>
  <title>Search Page</title>
  <link rel="stylesheet" href="/assets/css/frappe-web.css">
  <script type="text/javascript" src="/assets/js/frappe-web.min.js"></script>
</head>
<body>
  <div>
    <h1>Search Page</h1>
    <input type="text" id="searchInput" placeholder="Search...">
    <button onclick="performSearch()">Search</button>
    <div id="searchResults"></div>
  </div>

  <script>
    function performSearch() {
      const searchTerm = document.getElementById('searchInput').value;
      // Get result with frappe call
      const searchResults = [
        { name: 'Result 1', description: 'Description for Result 1' },
        { name: 'Result 2', description: 'Description for Result 2' },
      ];

      displaySearchResults(searchResults);
    }

    function displaySearchResults(results) {
      const searchResultsContainer = document.getElementById('searchResults');
      searchResultsContainer.innerHTML = ''; // Clear previous results

      results.forEach(result => {
        const resultDiv = document.createElement('div');
        resultDiv.innerHTML = `<strong>${result.name}</strong>: ${result.description}`;
        searchResultsContainer.appendChild(resultDiv);
      });
    }
  </script>
</body>
</html>