reactjs-input-search/dist/App.js

search input with suggestion

import React, { useState } from 'react';
import './App.css';
import AutoComplete from './componant/AutoComplete';
function App({
  inputFunction,
  placeholder,
  keyName,
  customLoading,
  noDataFound,
  inputStyle,
  highlight,
  onSelect
}) {
  const [searchData, setSearchData] = useState([]);
  const [suggestionShow, setSuggestionShow] = useState(false);
  const [loading, setLoading] = useState(false);

  // const inputFunction = async (inputValue) => {
  //   try {
  //     const response = await fetch(`${apiUrl}?search=${inputValue}`);
  //     if (!response.ok) {
  //       throw new Error('Network response was not ok ' + response.statusText);
  //     }
  //     const data = await response.json();
  //     return data;
  //   } catch (error) {
  //     console.error('There was a problem with the fetch operation:', error);
  //     throw error;
  //   }
  // }

  const fetchSuggestion = async inputValue => {
    setLoading(true);
    try {
      const result = await inputFunction(inputValue);
      setSearchData(result);
    } catch {
      err => {
        console.log(err);
      };
    } finally {
      setLoading(false);
    }
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AutoComplete, {
    placeholder: placeholder,
    searchData: searchData,
    fetchSuggestion: fetchSuggestion,
    dataKey: keyName,
    customLoading: customLoading || 'Loading...',
    NoDataFound: noDataFound || 'No Data Found',
    onSelect: onSelect,
    onBlur: e => setSuggestionShow(false),
    onFocus: e => setSuggestionShow(true),
    customStyle: inputStyle,
    suggestionShow: suggestionShow,
    setSuggestionShow: setSuggestionShow,
    loading: loading,
    setLoading: setLoading,
    setSearchData: setSearchData,
    highlight: highlight
  }));
}
export default App;