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 = `
      &lt;style&gt;
      * {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;  
        }
      }
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;

      &lt;div class=&quot;topnav&quot;&gt;
        &lt;a class=&quot;active&quot; href=&quot;#home&quot;&gt;Home&lt;/a&gt;
        &lt;a href=&quot;#about&quot;&gt;About&lt;/a&gt;
        &lt;a href=&quot;#contact&quot;&gt;Contact&lt;/a&gt;
        &lt;div class=&quot;search-container&quot;&gt;
          &lt;form&gt;
            &lt;input type=&quot;text&quot; placeholder=&quot;Search..&quot; name=&quot;search&quot;&gt;
            &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;`
      ;  
    }  
  }  
}  

// 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 = `  
        &lt;div&gt;  
          &lt;div class=&quot;ms-bgColor-themeDark ms-fontColor-white&quot;&gt;  
            &lt;i class=&quot;ms-Icon ms-Icon--Info&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt; ${escape(bottomString)}  
          &lt;/div&gt;  
        &lt;/div&gt;`;  
    }  
  }  
}  

}
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>