spfx application customizer search bar

Question

I am trying to create custom search bar for my sharepoint site on click or change of which it will load search results below is my code from which i had created html output but how should i write function on submit button so it send result to page url and reload it

_layouts/15/search.aspx/people?q=Test

Below is my code

import { Log } from '@microsoft/sp-core-library';
import {
  BaseApplicationCustomizer,
  PlaceholderContent,  
  PlaceholderName 
} from '@microsoft/sp-application-base';
//import { Dialog } from '@microsoft/sp-dialog';
//import styles from './CustomHeaderFooterApplicationCustomizer.module.scss';



import * as strings from 'SpfxExtensionsApplicationcustomizerApplicationCustomizerStrings';

const LOG_SOURCE: string = 'SpfxExtensionsApplicationcustomizerApplicationCustomizer';

/**
 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */
export interface ISpfxExtensionsApplicationcustomizerApplicationCustomizerProperties {
  // This is an example; replace with your own property
  Top: string;  
  Bottom: string; 
  
}



/** A Custom Action which can be run during execution of a Client Side Application */
export default class SpfxExtensionsApplicationcustomizerApplicationCustomizer
  extends BaseApplicationCustomizer<ISpfxExtensionsApplicationcustomizerApplicationCustomizerProperties> {
    private _topPlaceholder: PlaceholderContent | undefined;
    private _bottomPlaceholder: PlaceholderContent | undefined;
    
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);  
  
    // Added to handle possible changes on the existence of placeholders.  
    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);  
      
    // Call render method for generating the HTML elements.  
    this._renderPlaceHolders();  
  
    return Promise.resolve();  
  }

  private _renderPlaceHolders(): void {  
    console.log('HelloWorldApplicationCustomizer._renderPlaceHolders()');  
    console.log('Available placeholders: ',  
    this.context.placeholderProvider.placeholderNames.map(name => PlaceholderName[name]).join(', '));  
      
    // Handling the top placeholder  
    if (!this._topPlaceholder) {  
      this._topPlaceholder =  
        this.context.placeholderProvider.tryCreateContent(  
          PlaceholderName.Top,  
          { onDispose: this._onDispose });  
      
      // The extension should not assume that the expected placeholder is available.  
      if (!this._topPlaceholder) {  
        console.error('The expected placeholder (Top) was not found.');  
        return;  
      }  
      
      if (this.properties) {  
        let topString: string = this.properties.Top;  
        if (!topString) {  
          topString = '(Top property was not defined.)';  
        }  
      
        if (this._topPlaceholder.domElement) {  
          this._topPlaceholder.domElement.innerHTML = `
          <style>
          * {box-sizing: border-box;}
          
          body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
          }
          
          .topnav {
            overflow: hidden;
            background-color: #e9e9e9;
          }
          
          .topnav a {
            float: left;
            display: block;
            color: black;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
          }
          
          .topnav a:hover {
            background-color: #ddd;
            color: black;
          }
          
          .topnav a.active {
            background-color: #2196F3;
            color: white;
          }
          
          .topnav .search-container {
            float: right;
          }
          
          .topnav input[type=text] {
            padding: 6px;
            margin-top: 8px;
            font-size: 17px;
            border: none;
          }
          
          .topnav .search-container button {
            float: right;
            padding: 6px;
            margin-top: 8px;
            margin-right: 16px;
            background: #ddd;
            font-size: 17px;
            border: none;
            cursor: pointer;
          }
          
          .topnav .search-container button:hover {
            background: #ccc;
          }
          
          @media screen and (max-width: 600px) {
            .topnav .search-container {
              float: none;
            }
            .topnav a, .topnav input[type=text], .topnav .search-container button {
              float: none;
              display: block;
              text-align: left;
              width: 100%;
              margin: 0;
              padding: 14px;
            }
            .topnav input[type=text] {
              border: 1px solid #ccc;  
            }
          }
          </style>
          </head>
          <body>
          
          <div class="topnav">
            <a class="active" href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
            <div class="search-container">
              <form>
                <input type="text" placeholder="Search.." name="search">
                <button type="submit">Submit</button>
              </form>
            </div>
          </div>`
          ;  
        }  
      }  
    }  
      
    // Handling the bottom placeholder  
    if (!this._bottomPlaceholder) {  
      this._bottomPlaceholder =  
        this.context.placeholderProvider.tryCreateContent(  
          PlaceholderName.Bottom,  
          { onDispose: this._onDispose });  
      
      // The extension should not assume that the expected placeholder is available.  
      if (!this._bottomPlaceholder) {  
        console.error('The expected placeholder (Bottom) was not found.');  
        return;  
      }  
      
      if (this.properties) {  
        let bottomString: string = this.properties.Bottom;  
        if (!bottomString) {  
          bottomString = '(Bottom property was not defined.)';  
        }  
      
        if (this._bottomPlaceholder.domElement) {  
          this._bottomPlaceholder.domElement.innerHTML = `  
            <div>  
              <div class="ms-bgColor-themeDark ms-fontColor-white">  
                <i class="ms-Icon ms-Icon--Info" aria-hidden="true"></i> ${escape(bottomString)}  
              </div>  
            </div>`;  
        }  
      }  
    }  
 }
 

 
 private _onDispose(): void {
  console.log('[AlertApplicationCustomizer._onDispose] Disposed custom top and bottom placeholders.');
}  
}

Answer 1

Maybe it would be enough to set properties for yout form:

<form action="/_layouts/15/search.aspx/people" method="get">
 <input type="text" placeholder="Search.." name="q">
 <button type="submit">Submit</button>
</form>