DesktopSeachFlyout:

```jsx
const Button  = require('@jetprivilege/gcc-atom-form-controls').Button;

class DesktopSearchFlyoutExample extends React.Component{
  constructor(props){
      super(props)
      this.state = {
        value: '',
        autocompleteData: [],
        suggestions: [],
        localValue: [],
        recentlySearchedLocation: true,
        isRecentlySearch: false,
      }
  }

    getFlyoutOptions () {
        let url = 'https://restcountries.eu/rest/v2/region/asia';

        fetch(url)
            .then(response => { return response.json(); })
            .then(data => {
                let result =
                    data.map((lang, index) => {
                        return {
                            label: lang.name.trim(),
                            value: lang.capital,
                            properties: '39 Properties',
                            key: index
                        };

                    });

                this.setState({ autocompleteData: result });
                this.onChangeInput(result, null);
            });

    }

    onChangeInput (resultData, txt) {
        let result = resultData;

        let searchText = txt !== null ? txt : this.state.value.trim();

        let localValue = JSON.parse(localStorage.getItem('SearchLocation')) !== null ? JSON.parse(localStorage.getItem('SearchLocation')) : [];

        let autocompleteData;
        autocompleteData = result !== undefined ? result.filter(
            suggestion =>
                suggestion.label.toLowerCase().trim().indexOf(searchText.toLowerCase().trim()) !== -1) : null;


        if (searchText.trim().length > 2 && result.length > 0) {
            this.setState({ suggestions: autocompleteData, isRecentlySearchedLocation: false });
        }
        else {
            if (searchText.trim().length < 3) {

                if (localValue === undefined || localValue === null) {
                    // this.setState({ isRecentlySearchedLocation: false });
                }
                else {
                    let resultLocalStorage = [];
                    if (localValue.length >= 0) {
                        resultLocalStorage = Array.from(new Set(localValue.map(s => s.location)))
                            .map((location, index) => {
                                return {
                                    location: location,
                                    'dateRange': new Date(),
                                    'roomConfig': '2 Room :',
                                    'paxConfig': '2 Adult 1 Child',
                                    key: index
                                };
                            });
                    }
                    resultLocalStorage.reverse();
                    while (resultLocalStorage.length > 10) {
                        resultLocalStorage.pop();
                    }
                    this.setState({ localValue: resultLocalStorage, isRecentlySearchedLocation: true });
                }
            }
        }
    }

    onSearchFlyoutChange(e) {
        if (e.target.value.length > 2)
            this.getFlyoutOptions(e.target.value);
        else
            this.onChangeInput(this.state.autocompleteData, e.target.value);

        var regexName = /^[0-9]+$/;
        if (!regexName.test(e.target.value)) {
            this.setState({
                value: e.target.value
            });
        }

        if (e.target.value.trim().length < 3) {
            if (localStorage.length > 0) {
                this.setState({
                    isRecentlySearch: true
                });
            }
            else {
                this.setState({
                    isRecentlySearch: null
                });
            }
        }
        else {
            this.setState({
                isRecentlySearch: false
            });
        }
    }

    onSelectFlyoutValue (val) {
        this.setState({
            value: val, isRecentlySearchedLocation: false
        });

        this.onBlurInput();
    }

    onBlurInput(val) {
        this.setState({
            isNewClass: true
        });
    }

    onClickSearchBtn() {
        let localValue = JSON.parse(localStorage.getItem('SearchLocation')) !== null ? JSON.parse(localStorage.getItem('SearchLocation')) : [];
        let value = this.state.value.trim();
        let autocompleteData = [...this.state.autocompleteData];
        let labelValue = autocompleteData.map(x => x.label);

        if (localValue.length === 0) {

            if (JSON.stringify(labelValue).includes(value) && value !== '') {

                let updatedValue = [];
                updatedValue.push({
                    'location': value,
                    'dateRange': new Date(),
                    'roomConfig': '3 Room : ',
                    'paxConfig': '3 Adult 1 Child'
                });
                localStorage.setItem('SearchLocation', JSON.stringify(updatedValue));
                this.setState({ localValue: localValue, isRecentlySearchedLocation: true });
            }
        }
        else {
            //let localValue = JSON.parse(localStorage.getItem('SearchLocation'));
            let locatValue = localValue.map(x => x.location);

            if (JSON.stringify(labelValue).includes(value) && value !== '') {
                if (locatValue.includes(value) === false) {
                    localValue.push({
                        'location': value.trim(),
                        'dateRange': new Date(),
                        'roomConfig': '2 Room : ',
                        'paxConfig': '2 Adult 1 Child'
                    });

                    localStorage.setItem('SearchLocation', JSON.stringify(localValue));

                    localValue.reverse();
                    this.setState({ localValue, isRecentlySearchedLocation: true });
                }
                else {
                    localValue = localValue.filter(item => item.location !== value);
                    let asd = {
                        'location': value,
                        'dateRange': new Date(),
                        'roomConfig': '2 Room : ',
                        'paxConfig': '2 Adult 1 Child'
                    };
                    localValue.reverse();
                    localValue = [asd, ...localValue];
                }
                localValue.reverse();
                localStorage.setItem('SearchLocation', JSON.stringify(localValue));

                this.setState({ localValue: localValue, isRecentlySearchedLocation: true });
            }
        }
        this.setState({ isRecentlySearchedLocation: true });
    }

    onMenuVisibilityChange(){
        this.onSearchFlyoutChange({ target: { value: this.state.value } });
        this.menuVisibilityChange();
        this.setState({
            isNewClass: false
        });
    }

    menuVisibilityChange(){
        let localValue = JSON.parse(localStorage.getItem('SearchLocation')) !== null ? JSON.parse(localStorage.getItem('SearchLocation')) : [];
        let autocompleteData = [...this.state.suggestions];

        if (localValue === undefined && localValue === null) {
            // this.setState({isRecentlySearchedLocation : false});
        }
        else {

            if (localValue.length > 0 && this.state.value.length <= 2) {
                const result = Array.from(new Set(localValue.map(s => s.location)))
                    .map((location, index) => {
                        return {
                            location: location,
                            'dateRange': new Date(),
                            'roomConfig': '2 Room : ',
                            'paxConfig': '2 Adult 1 Child',
                            key: index
                        };
                    });

                result.reverse();
                while (result.length > 10) {
                    result.pop();
                }

                this.setState({ localValue: result, isRecentlySearchedLocation: true });
            }
            else {
                if (this.state.value.length > 2) {

                    autocompleteData.filter(
                        suggestion => suggestion.label.toLowerCase().trim().indexOf(this.state.value.toLowerCase().trim()) !== -1);

                    const result = autocompleteData.map(s => s.label)
                        .map((label, index) => {
                            return {
                                label: label,
                                key: index
                            };
                        });

                    while (result.length > 10) {
                        result.pop();
                    }
                    this.setState({ suggestions: result, isRecentlySearchedLocation: false });
                }
            }
        }
    }

  render(){
      return(
          <div className="atom-container">
                    <h3>Desktop Home Search Flyout:</h3><br />
                    <DesktopSearchFlyout
                        searchFlyoutValue={this.state.value}
                        onChange={this.onSearchFlyoutChange.bind(this)}
                        onSelect={this.onSelectFlyoutValue.bind(this)}
                        isNewClass={this.state.isNewClass}
                        onMenuVisibilityChange={this.onMenuVisibilityChange.bind(this)}
                        suggestions={this.state.suggestions}
                        isRecentlySearchedLocation={this.state.isRecentlySearchedLocation}
                        isRecentlySearch={this.state.isRecentlySearch}
                        recentlySearchHeaderText='Recent Search'
                        nearByHeaderText='Suggested Locations'
                        localValue={this.state.localValue}
                        minLocationSerchLength={2}
                    /><br />
                    <h3>Desktop Filter Page Search Flyout:</h3><br />
                    <DesktopSearchFlyout
                        isHomePage={false}
                        searchFlyoutValue={this.state.value}
                        onChange={this.onSearchFlyoutChange.bind(this)}
                        onSelect={this.onSelectFlyoutValue.bind(this)}
                        isNewClass={this.state.isNewClass}
                        onMenuVisibilityChange={this.onMenuVisibilityChange.bind(this)}
                        suggestions={this.state.suggestions}
                        isRecentlySearchedLocation={this.state.isRecentlySearchedLocation}
                        isRecentlySearch={this.state.isRecentlySearch}
                        recentlySearchHeaderText='Recent Search'
                        nearByHeaderText='Suggested Locations'
                        localValue={this.state.localValue}
                        minLocationSerchLength={2}
                    />
                    <Button value="Search" buttonType="primary" onClick={this.onClickSearchBtn.bind(this)} />
                </div>

      );
  }
}; <DesktopSearchFlyoutExample />
```