none
When I enter the text in search box am not able to getting the result in SPFx webpart RRS feed

  • General discussion

  • import { Version } from '@microsoft/sp-core-library';
    import {
      BaseClientSideWebPart,
      IPropertyPaneConfiguration,
      PropertyPaneTextField
    } from '@microsoft/sp-webpart-base';
    import { escape } from '@microsoft/sp-lodash-subset';

    import styles from './SearchgridviewWebPart.module.scss';
    import * as strings from 'SearchgridviewWebPartStrings';
    import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

    export interface ISearchgridviewWebPartProps {
      description: string;
    }
    export interface ISPLists {
      value: ISPList[];
    }
    export interface ISPList {
      PR_Number: string;
      Description: string;
      Request_Date: string;


    export default class SearchgridviewWebPart extends BaseClientSideWebPart<ISearchgridviewWebPartProps> {

      private _getListData(): Promise<ISPLists> {
        let queryString: string = '';
        let queryStringforPR: string = '';
        let searchboxVal: string=(this.domElement.querySelector('#searchbox') as  HTMLInputElement).value;
        if(searchboxVal=""){
          queryString="$filter=((substringof('"+searchboxVal+"',PR_Number)))";
        }
        return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('PurchaseRequest')/Items?${queryString}`, SPHttpClient.configurations.v1)
            .then((response: SPHttpClientResponse) => { 
             // debugger;
              return response.json();
            });
      }

      private _renderListAsync(): void {

        this._getListData()
        .then((response) => {
          this._renderList(response.value);
        });
      }


      private _renderList(items: ISPList[]): void {
        let html: string = '<table class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
        html += `<th>PR_Number</th><th>Description</th><th>Request_Date</th>`;
        items.forEach((item: ISPList) => {
          html += `
              <tr>
              <td>${item.PR_Number}</td>
              <td>${item.Description}</td>
              <td>${item.Request_Date}</td>
              </tr>
              `;
        });
        html += `</table>`;
        const listContainer: Element = this.domElement.querySelector('#spListContainer');
        listContainer.innerHTML = html;
      }


      private _setSearchBtnEventHandlers(): void {
        this.domElement.querySelector('#searchBtn').addEventListener('click', () => {         
            this._renderListAsync();
        }); 
     }  


     public render(): void {
      this.domElement.innerHTML = `
       <div class="${styles.gListItems}">
       <div class="${styles.container}">
         <div class="ms-Grid-row ms-fontColor-white ${styles.row}">
           <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">       
             <p class="ms-font-l ms-fontColor-white" style="text-align: center">Demo : Retrieve Data from SharePoint List</p>
           </div>
         </div>
         <div class="ms-Grid-row ms-fontColor-white ${styles.row}"> 
           <input id="searchbox" type="textbox"/><input id="searchBtn" type="button" value="Search"/>     
           <br>
           <div id="spListContainer" />
         </div>
       </div>
     </div>`;
     this._renderListAsync();
     this._setSearchBtnEventHandlers();
    }

      protected get dataVersion(): Version {
        return Version.parse('1.0');
      }

      protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
        return {
          pages: [
            {
              header: {
                description: strings.PropertyPaneDescription
              },
              groups: [
                {
                  groupName: strings.BasicGroupName,
                  groupFields: [
                    PropertyPaneTextField('description', {
                      label: strings.DescriptionFieldLabel
                    })
                  ]
                }
              ]
            }
          ]
        };
      }
    }


            
    • Edited by venusp Thursday, October 24, 2019 2:42 PM
    Thursday, October 24, 2019 2:40 PM