Added autosuggest

package-lock.json

@@ -6559,6 +6559,11 @@
         "es6-symbol": "^3.1.1"
       }
     },
+    "es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+    },
     "es6-symbol": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
@@ -14130,6 +14135,18 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-autosuggest": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-autosuggest/-/react-autosuggest-10.1.0.tgz",
+      "integrity": "sha512-/azBHmc6z/31s/lBf6irxPf/7eejQdR0IqnZUzjdSibtlS8+Rw/R79pgDAo6Ft5QqCUTyEQ+f0FhL+1olDQ8OA==",
+      "requires": {
+        "es6-promise": "^4.2.8",
+        "prop-types": "^15.7.2",
+        "react-themeable": "^1.1.0",
+        "section-iterator": "^2.0.0",
+        "shallow-equal": "^1.2.1"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -14549,6 +14566,21 @@
       "resolved": "https://registry.npmjs.org/react-singleton-hook/-/react-singleton-hook-3.4.0.tgz",
       "integrity": "sha512-eQEpyacGAaRejmWUizUdNNQFn5AO0iaKRSl1jxgC0FQadVY/I1WFuPrYiutglPzO9s8yEbIh95UXVJQel4d7HQ=="
     },
+    "react-themeable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-themeable/-/react-themeable-1.1.0.tgz",
+      "integrity": "sha512-kl5tQ8K+r9IdQXZd8WLa+xxYN04lLnJXRVhHfdgwsUJr/SlKJxIejoc9z9obEkx1mdqbTw1ry43fxEUwyD9u7w==",
+      "requires": {
+        "object-assign": "^3.0.0"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
+          "integrity": "sha512-jHP15vXVGeVh1HuaA2wY6lxk+whK/x4KBG88VXeRma7CCun7iGD5qPc4eYykQ9sdQvg8jkwFKsSxHln2ybW3xQ=="
+        }
+      }
+    },
     "react-toastify": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.0.3.tgz",
@@ -15466,6 +15498,11 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "section-iterator": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/section-iterator/-/section-iterator-2.0.0.tgz",
+      "integrity": "sha512-xvTNwcbeDayXotnV32zLb3duQsP+4XosHpb/F+tu6VzEZFmIjzPdNk6/O+QOOx5XTh08KL2ufdXeCO33p380pQ=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -15670,6 +15707,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
     "shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",

package.json

@@ -26,6 +26,7 @@
     "owasp-password-strength-test": "^1.3.0",
     "query-string": "^7.1.1",
     "react": "^17.0.2",
+    "react-autosuggest": "^10.1.0",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.0.9",
     "react-i18next": "^11.10.0",

src/components/TextFields/AutoSuggestTextField/AutoSuggestTextField.js

@@ -0,0 +1,149 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import Autosuggest from "react-autosuggest";
+import { AutoSuggestTextFieldContainer } from "./AutoSuggestTextField.styled";
+
+const languages = [
+  {
+    name: "C",
+    year: 1972,
+  },
+  {
+    name: "C#",
+    year: 2000,
+  },
+  {
+    name: "C++",
+    year: 1983,
+  },
+  {
+    name: "Clojure",
+    year: 2007,
+  },
+  {
+    name: "Elm",
+    year: 2012,
+  },
+  {
+    name: "Go",
+    year: 2009,
+  },
+  {
+    name: "Haskell",
+    year: 1990,
+  },
+  {
+    name: "Java",
+    year: 1995,
+  },
+  {
+    name: "Javascript",
+    year: 1995,
+  },
+  {
+    name: "Perl",
+    year: 1987,
+  },
+  {
+    name: "PHP",
+    year: 1995,
+  },
+  {
+    name: "Python",
+    year: 1991,
+  },
+  {
+    name: "Ruby",
+    year: 1995,
+  },
+  {
+    name: "Scala",
+    year: 2003,
+  },
+];
+const escapeRegexCharacters = (str) =>
+  str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+const getSuggestions = (value) => {
+  const escapedValue = escapeRegexCharacters(value.trim());
+
+  if (escapedValue === "") {
+    return [];
+  }
+
+  const regex = new RegExp("^" + escapedValue, "i");
+  const suggestions = languages.filter((language) => regex.test(language.name));
+
+  if (suggestions.length === 0) {
+    return [{ isAddNew: true }];
+  }
+
+  return suggestions;
+};
+
+const AutoSuggestTextField = () => {
+  const [value, setValue] = useState("");
+  const [suggestions, setSuggestions] = useState([]);
+
+  const onChange = (event, { newValue }) => {
+    setValue(newValue);
+  };
+
+  const getSuggestionValue = (suggestion) => {
+    if (suggestion.isAddNew) {
+      return value;
+    }
+    return suggestion.name;
+  };
+
+  const onSuggestionsFetchRequested = ({ value }) => {
+    setSuggestions(getSuggestions(value));
+  };
+
+  const onSuggestionsClearRequested = () => {
+    setSuggestions([]);
+  };
+
+  const onSuggestionSelected = (event, { suggestion }) => {
+    if (suggestion.isAddNew) {
+      console.log("Add new:", value);
+    }
+  };
+
+  const renderSuggestion = (suggestion) => {
+    if (suggestion.isAddNew) {
+      return (
+        <span>
+          [+] Add new: <strong>{value}</strong>
+        </span>
+      );
+    }
+
+    return suggestion.name;
+  };
+  const inputProps = {
+    placeholder: "Type 'c'",
+    value,
+    onChange: onChange,
+  };
+
+  return (
+    <AutoSuggestTextFieldContainer>
+      <Autosuggest
+        suggestions={suggestions}
+        onSuggestionsFetchRequested={onSuggestionsFetchRequested}
+        onSuggestionsClearRequested={onSuggestionsClearRequested}
+        getSuggestionValue={getSuggestionValue}
+        renderSuggestion={renderSuggestion}
+        onSuggestionSelected={onSuggestionSelected}
+        inputProps={inputProps}
+      />
+    </AutoSuggestTextFieldContainer>
+  );
+};
+
+AutoSuggestTextField.propTypes = {
+  children: PropTypes.node,
+};
+
+export default AutoSuggestTextField;

src/components/TextFields/AutoSuggestTextField/AutoSuggestTextField.styled.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { Box } from "@mui/material";
+
+export const AutoSuggestTextFieldContainer = styled(Box)`
+  & .react-autosuggest__container {
+    
+  }
+`;

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.js

@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next";
 import { TextField } from "../../../../components/TextFields/TextField/TextField";
 import { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
 import selectedTheme from "../../../../themes";
+import AutoSuggestTextField from "../../../../components/TextFields/AutoSuggestTextField/AutoSuggestTextField";
 
 const ThirdPartOfRegistration = (props) => {
   const { t } = useTranslation();
@@ -98,6 +99,8 @@ const ThirdPartOfRegistration = (props) => {
         fullWidth
       />
 
+      <AutoSuggestTextField />
+
       <PrimaryButton
         type="submit"
         variant="contained"