MobileSeachFlyout:

```jsx

var endDate = new Date();
endDate.setDate(endDate.getDate() + 2);

class MobileSearchFlyoutExample extends React.Component{
  constructor(props){
      super(props)
      this.state = {
        searchValueMobileFlyout: '',
        autocompleteDataMobileFlyout: [],
        suggestionsMobileFlyout: [],
        localValueMobileFlyout: [],
        isRecentlySearchedMobileLocation: true,
        isRecentlySearchMobile: false,
        isSearchModalOpen: false
      }
  }

getMobileFlyoutOptions () {

        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({ autocompleteDataMobileFlyout: result });
                this.onMobileChangeInput(result, null);
            });

    }

    onMobileChangeInput(resultData, txt)
    {

        let result = resultData;

        let searchText = txt !== null ? txt : this.state.searchValueMobileFlyout.trim();
        let localValueMobileFlyout = JSON.parse(localStorage.getItem('SearchMobileLocation')) !== null ? JSON.parse(localStorage.getItem('SearchMobileLocation')) : [];

        let autocompleteDataMobileFlyout;
        autocompleteDataMobileFlyout = 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({ suggestionsMobileFlyout: autocompleteDataMobileFlyout, isRecentlySearchedMobileLocation: false });
        }
        else {
            if (searchText.trim().length < 3) {

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

    onSearchMobileFlyoutChange (e)
    {
        if (e.target.value.length > 2)
            this.getMobileFlyoutOptions(e.target.value);
        else
            this.onMobileChangeInput(this.state.autocompleteDataMobileFlyout, e.target.value);

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

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

    onSelectMobileFlyoutValue (val) {
        /** For directly closing modal popup after selecting value */
        this.crossHandlerMobileFlyout();
        this.setState({
            searchValueMobileFlyout: val, isRecentlySearchedMobileLocation: false
        });
    }

    onClickMobileSearchBtn () {
        let localValueMobileFlyout = JSON.parse(localStorage.getItem('SearchMobileLocation')) !== null ? JSON.parse(localStorage.getItem('SearchMobileLocation')) : [];

        let value = this.state.searchValueMobileFlyout.trim();
        let autocompleteDataMobileFlyout = [...this.state.autocompleteDataMobileFlyout];
        let labelValue = autocompleteDataMobileFlyout.map(x => x.label);

        if (localValueMobileFlyout.length === 0) {

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

                let updatedValue = [];
                updatedValue.push({
                    'location': value,
                    'dateRange': new Date(),
                    'endDate': endDate,
                    'roomConfig': '3 Room',
                    'paxConfig': '3 Adult 1 Child'
                });
                localStorage.setItem('SearchMobileLocation', JSON.stringify(updatedValue));
                this.setState({ localValueMobileFlyout: localValueMobileFlyout, isRecentlySearchedMobileLocation: true });
            }
        }
        else {
            let locatValue = localValueMobileFlyout.map(x => x.location);

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

                    localStorage.setItem('SearchMobileLocation', JSON.stringify(localValueMobileFlyout));

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

                this.setState({ localValueMobileFlyout: localValueMobileFlyout, isRecentlySearchedMobileLocation: true });
            }
        }
        this.setState({ isRecentlySearchedMobileLocation: true });
    }

    onMenuVisibilityChangeMobile () {
        this.onSearchMobileFlyoutChange({ target: { value: this.state.searchValueMobileFlyout } });
        this.menuVisibilityChangeMobile();
    }

    menuVisibilityChangeMobile()  {

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

        let autocompleteDataMobileFlyout = [...this.state.suggestionsMobileFlyout];

        if (localValueMobileFlyout === undefined || localValueMobileFlyout === null) {
            // this.setState({isRecentlySearchedMobileLocation : false});
        }
        else {

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

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

                this.setState({ localValueMobileFlyout: result, isRecentlySearchedMobileLocation: true });
            }
            else {
                if (this.state.searchValueMobileFlyout.length > 2) {

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

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

                    while (result.length > 3) {
                        result.pop();
                    }
                    this.setState({ suggestionsMobileFlyout: result, isRecentlySearchedMobileLocation: false });
                }
            }
        }
    }

openModalSearch() {
        this.setState({ isSearchModalOpen: true });
    }
    crossHandlerMobileFlyout() {
        this.setState({ isSearchModalOpen: false, searchValueMobileFlyout: this.state.searchValueMobileFlyout });
    }
    closeMobileModalSearch() {
        this.setState({ isSearchModalOpen: false });
    }

  render(){
      return(
                <div className="atom-container">
                    <h3>Mobile Search Flyout:</h3><br />
                    <span>CITY/AREA/HOTEL NAME</span>
                    <div>
                        <InputText type='text' id='txtSearch'
                            readOnly
                            parentClassName='jp-mobile-search-input'
                            value={this.state.searchValueMobileFlyout}
                            onClick={this.openModalSearch.bind(this)}
                        />
                    </div>
                    <div>
                        <MobileSearchFlyout
                            searchFlyoutValue={this.state.searchValueMobileFlyout}
                            onChange={this.onSearchMobileFlyoutChange.bind(this)}
                            onSelect={this.onSelectMobileFlyoutValue.bind(this)}
                            onMenuVisibilityChange={this.onMenuVisibilityChangeMobile.bind(this)}
                            suggestions={this.state.suggestionsMobileFlyout}
                            isRecentlySearchedLocation={this.state.isRecentlySearchedMobileLocation}
                            isRecentlySearch={this.state.isRecentlySearchMobile}
                            recentlySearchHeaderText='Recent Search'
                            nearByHeaderText='Suggested Locations'
                            localValue={this.state.localValueMobileFlyout}
                            minLocationSerchLength={2}
                            onCrossIcon={this.crossHandlerMobileFlyout.bind(this)}
                            searchLabel='CITY/AREA/HOTEL NAME'
                            isSearchModalOpen={this.state.isSearchModalOpen}
                            closeMobileModalSearch={this.state.closeMobileModalSearch}
                        />

                    </div>
                    <Button value='Search' buttonType='primary' onClick={this.onClickMobileSearchBtn.bind(this)} />
                </div>
      );
  }
}; <MobileSearchFlyoutExample />
```