text: import React, { Component } from 'react';
  import { AutoComplete } from '../../components/autocomplete/AutoComplete';
  import { CountryService } from '../service/CountryService';
  import { AutoCompleteDoc } from './AutoCompleteDoc';
  import { AppInlineHeader } from '../../AppInlineHeader';
  
  export class AutoCompleteDemo extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              countries: [],
              selectedCountry1: null,
              selectedCountry2: null,
              selectedCountries: null,
              filteredCountries: null
          };
  
          this.searchCountry = this.searchCountry.bind(this);
          this.itemTemplate = this.itemTemplate.bind(this);
          this.countryservice = new CountryService();
      }
  
      componentDidMount() {
          this.countryservice.getCountries().then(data => this.setState({ countries: data }));
      }
  
      searchCountry(event) {
          setTimeout(() => {
              let filteredCountries;
              if (!event.query.trim().length) {
                  filteredCountries = [...this.state.countries];
              }
              else {
                  filteredCountries = this.state.countries.filter((country) => {
                      return country.name.toLowerCase().startsWith(event.query.toLowerCase());
                  });
              }
  
              this.setState({ filteredCountries });
          }, 250);
      }
  
      itemTemplate(item) {
          return (
              <div className="country-item">
                  <img alt={item.name} src={`showcase/demo/images/flag_placeholder.png`} className={`flag flag-${item.code.toLowerCase()}`} />
                  <div>{item.name}</div>
              </div>
          );
      }
  
      render() {
          return (
              <div>
                  <div className="content-section introduction">
                      <AppInlineHeader changelogText="autoComplete" showInputStyle>
                          <h1>AutoComplete</h1>
                          <p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
                      </AppInlineHeader>
                  </div>
  
                  <div className="content-section implementation">
                      <div className="card">
                          <h5>Basic</h5>
                          <AutoComplete value={this.state.selectedCountry1} suggestions={this.state.filteredCountries} completeMethod={this.searchCountry} field="name" onChange={(e) => this.setState({ selectedCountry1: e.value })} />
  
                          <h5>Dropdown and Templating</h5>
                          <AutoComplete value={this.state.selectedCountry2} suggestions={this.state.filteredCountries} completeMethod={this.searchCountry} field="name" dropdown itemTemplate={this.itemTemplate} onChange={(e) => this.setState({ selectedCountry2: e.value })} />
  
                          <h5>Multiple</h5>
                          <span className="p-fluid">
                              <AutoComplete value={this.state.selectedCountries} suggestions={this.state.filteredCountries} completeMethod={this.searchCountry} field="name" multiple onChange={(e) => this.setState({ selectedCountries: e.value })} />
                          </span>
                      </div>
                  </div>
  
                  <AutoCompleteDoc></AutoCompleteDoc>
              </div>
          )
      }
  }
  