Project For learner – React.js Auto complete idea Component exemplar in Browser Using Javascript Complete

Welcome Learner today in this blog post we will be Develop an Auto complete purpose Component exemplar in Browser Using Javascript. All the Complete source code of the application is shown Down.

In order to lets started, you need to make a file index.html and copy-paste the mentioned code

index.html 

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>

Now create a style.css file and copypaste the resulting code

style.css 

* {
  font-family: sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.App {
  padding: 50px 20px;
}
.user-input {
  width: 250px;
  padding: 5px 3px;
}
.suggestions-list {
  list-style: none;
  padding: 0;
  max-height: 160px;
  overflow-y: auto;
  max-width: 250px;
}
.suggestion {
  background-color: rgb(226, 181, 181);
  padding: 10px;
  color: rgb(65, 65, 65);
  cursor: pointer;
}
.suggestion:hover {
  background-color: rgba(238, 238, 238, 0.1);
}
.selected {
  background-color: rgb(148, 44, 44);
  color: rgb(238, 223, 223);
}

READ Develop a Compound Interest Calculator Using Chart.js in CSS3 Javascript and HTML5

Now create a script.js file and copy-paste the next code.

script.js 

"use strict";

const SuggestionsList = props => {
  const {
    suggestions,
    inputValue,
    onSelectSuggestion,
    displaySuggestions,
    selectedSuggestion
  } = props;

  if (inputValue && displaySuggestions) {
    if (suggestions.length > 0) {
      return /*#__PURE__*/React.createElement("ul", {
        className: "suggestions-list"
      }, suggestions.map((suggestion, index) => {
        const isSelected = selectedSuggestion === index;
        const classname = `suggestion ${isSelected ? "selected" : ""}`;
        return /*#__PURE__*/React.createElement("li", {
          key: index,
          className: classname,
          onClick: () => onSelectSuggestion(index)
        }, suggestion);
      }));
    } else {
      return /*#__PURE__*/React.createElement("div", null, "No suggestions available...");
    }
  }

  return /*#__PURE__*/React.createElement(React.Fragment, null);
};

const Autocomplete = () => {
  const [inputValue, setInputValue] = React.useState("");
  const [filteredSuggestions, setFilteredSuggestions] = React.useState([]);
  const [selectedSuggestion, setSelectedSuggestion] = React.useState(0);
  const [displaySuggestions, setDisplaySuggestions] = React.useState(false);
  const suggestions = ["Oathbringer", "American Gods", "A Game of Thrones", "Prince of Thorns", "Assassin's Apprentice", "The Hero of Ages", "The Gunslinger"];

  const onChange = event => {
    const value = event.target.value;
    setInputValue(value);
    const filteredSuggestions = suggestions.filter(suggestion => suggestion.toLowerCase().includes(value.toLowerCase()));
    setFilteredSuggestions(filteredSuggestions);
    setDisplaySuggestions(true);
  };

  const onSelectSuggestion = index => {
    setSelectedSuggestion(index);
    setInputValue(filteredSuggestions[index]);
    setFilteredSuggestions([]);
    setDisplaySuggestions(false);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "React Autocomplete"), /*#__PURE__*/React.createElement("input", {
    className: "user-input",
    type: "text",
    onChange: onChange,
    value: inputValue
  }), /*#__PURE__*/React.createElement(SuggestionsList, {
    inputValue: inputValue,
    selectedSuggestion: selectedSuggestion,
    onSelectSuggestion: onSelectSuggestion,
    displaySuggestions: displaySuggestions,
    suggestions: filteredSuggestions
  }));
};

function App() {
  return /*#__PURE__*/React.createElement("div", {
    className: "App"
  }, /*#__PURE__*/React.createElement(Autocomplete, null));
}

const rootElement = document.getElementById("root");
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), rootElement);