{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/components/autocomplete","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"8f965323-37f2-570c-b587-198ffcc7f401","title":"Autocomplete","slug":"/contrast/react/components/autocomplete"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Autocomplete\",\n  \"metaTitle\": \"Autocomplete Component for Contrast Bootstrap React\",\n  \"metaDescription\": \"Building an Autocomplete Component using the Contrast Bootstrap React Package\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Link = makeShortcode(\"Link\");\nvar CDBCard = makeShortcode(\"CDBCard\");\nvar CDBCardBody = makeShortcode(\"CDBCardBody\");\nvar CDBInput = makeShortcode(\"CDBInput\");\nvar CDBAutocomplete = makeShortcode(\"CDBAutocomplete\");\nvar CDBBtn = makeShortcode(\"CDBBtn\");\nvar CDBIcon = makeShortcode(\"CDBIcon\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Autocomplete\"), mdx(\"p\", null, \"Autocomplete is a component which predicts the words basing on the first few letters given by a user, while one is typing it. It takes in an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Array\"), \" full of suggestions.\\nYou can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u2191\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u2193\"), \" arrow keys to navigate through options and use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u21B5\"), \" key to select required option.\"), mdx(\"h2\", null, \"Examples\"), mdx(\"p\", null, \"Default Autocomplete example.\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"div\", {\n    className: \"cdb-form\",\n    style: {\n      \"width\": \"100%\"\n    }\n  }, mdx(\"input\", {\n    type: \"text\",\n    className: \"form-control\",\n    id: \"cdb-autocomplete\",\n    name: \"q\",\n    style: {\n      \"maxWidth\": \"450px\"\n    }\n  }), mdx(\"label\", null, \"Which country are you from\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBAutocomplete, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Autocomplete = () => {\\n  const countryList = [\\n    \\\"Afghanistan\\\",\\n    \\\"Albania\\\",\\n    \\\"Algeria\\\",\\n    \\\"American Samoa\\\",\\n    \\\"Andorra\\\",\\n    \\\"Angola\\\",\\n    \\\"Anguilla\\\",\\n    \\\"Antarctica\\\",\\n    \\\"Antigua and Barbuda\\\",\\n    \\\"Argentina\\\",\\n    \\\"Armenia\\\",\\n    \\\"Aruba\\\",\\n    \\\"Australia\\\",\\n    \\\"Austria\\\",\\n    \\\"Azerbaijan\\\",\\n    \\\"Bahamas (the)\\\",\\n    \\\"Bahrain\\\",\\n    \\\"Bangladesh\\\",\\n    \\\"Barbados\\\",\\n    \\\"Belarus\\\",\\n    \\\"Belgium\\\",\\n    \\\"Belize\\\",\\n    \\\"Benin\\\",\\n    \\\"Bermuda\\\",\\n    \\\"Bhutan\\\",\\n    \\\"Bolivia (Plurinational State of)\\\",\\n    \\\"Bonaire, Sint Eustatius and Saba\\\",\\n    \\\"Bosnia and Herzegovina\\\",\\n    \\\"Botswana\\\",\\n    \\\"Bouvet Island\\\",\\n    \\\"Brazil\\\",\\n    \\\"British Indian Ocean Territory (the)\\\",\\n    \\\"Brunei Darussalam\\\",\\n    \\\"Bulgaria\\\",\\n    \\\"Burkina Faso\\\",\\n    \\\"Burundi\\\",\\n    \\\"Cabo Verde\\\",\\n    \\\"Cambodia\\\",\\n    \\\"Cameroon\\\",\\n    \\\"Canada\\\",\\n    \\\"Cayman Islands (the)\\\",\\n    \\\"Central African Republic (the)\\\",\\n    \\\"Chad\\\",\\n    \\\"Chile\\\",\\n    \\\"China\\\",\\n    \\\"Christmas Island\\\",\\n    \\\"Cocos (Keeling) Islands (the)\\\",\\n    \\\"Colombia\\\",\\n    \\\"Comoros (the)\\\",\\n    \\\"Congo (the Democratic Republic of the)\\\",\\n    \\\"Congo (the)\\\",\\n    \\\"Cook Islands (the)\\\",\\n    \\\"Costa Rica\\\",\\n    \\\"Croatia\\\",\\n    \\\"Cuba\\\",\\n    \\\"Cura\\xE7ao\\\",\\n    \\\"Cyprus\\\",\\n    \\\"Czechia\\\",\\n    \\\"C\\xF4te d'Ivoire\\\",\\n    \\\"Denmark\\\",\\n    \\\"Djibouti\\\",\\n    \\\"Dominica\\\",\\n    \\\"Dominican Republic (the)\\\",\\n    \\\"Ecuador\\\",\\n    \\\"Egypt\\\",\\n    \\\"El Salvador\\\",\\n    \\\"Equatorial Guinea\\\",\\n    \\\"Eritrea\\\",\\n    \\\"Estonia\\\",\\n    \\\"Eswatini\\\",\\n    \\\"Ethiopia\\\",\\n    \\\"Falkland Islands (the) [Malvinas]\\\",\\n    \\\"Faroe Islands (the)\\\",\\n    \\\"Fiji\\\",\\n    \\\"Finland\\\",\\n    \\\"France\\\",\\n    \\\"French Guiana\\\",\\n    \\\"French Polynesia\\\",\\n    \\\"French Southern Territories (the)\\\",\\n    \\\"Gabon\\\",\\n    \\\"Gambia (the)\\\",\\n    \\\"Georgia\\\",\\n    \\\"Germany\\\",\\n    \\\"Ghana\\\",\\n    \\\"Gibraltar\\\",\\n    \\\"Greece\\\",\\n    \\\"Greenland\\\",\\n    \\\"Grenada\\\",\\n    \\\"Guadeloupe\\\",\\n    \\\"Guam\\\",\\n    \\\"Guatemala\\\",\\n    \\\"Guernsey\\\",\\n    \\\"Guinea\\\",\\n    \\\"Guinea-Bissau\\\",\\n    \\\"Guyana\\\",\\n    \\\"Haiti\\\",\\n    \\\"Heard Island and McDonald Islands\\\",\\n    \\\"Holy See (the)\\\",\\n    \\\"Honduras\\\",\\n    \\\"Hong Kong\\\",\\n    \\\"Hungary\\\",\\n    \\\"Iceland\\\",\\n    \\\"India\\\",\\n    \\\"Indonesia\\\",\\n    \\\"Iran (Islamic Republic of)\\\",\\n    \\\"Iraq\\\",\\n    \\\"Ireland\\\",\\n    \\\"Isle of Man\\\",\\n    \\\"Israel\\\",\\n    \\\"Italy\\\",\\n    \\\"Jamaica\\\",\\n    \\\"Japan\\\",\\n    \\\"Jersey\\\",\\n    \\\"Jordan\\\",\\n    \\\"Kazakhstan\\\",\\n    \\\"Kenya\\\",\\n    \\\"Kiribati\\\",\\n    \\\"Korea (the Democratic People's Republic of)\\\",\\n    \\\"Korea (the Republic of)\\\",\\n    \\\"Kuwait\\\",\\n    \\\"Kyrgyzstan\\\",\\n    \\\"Lao People's Democratic Republic (the)\\\",\\n    \\\"Latvia\\\",\\n    \\\"Lebanon\\\",\\n    \\\"Lesotho\\\",\\n    \\\"Liberia\\\",\\n    \\\"Libya\\\",\\n    \\\"Liechtenstein\\\",\\n    \\\"Lithuania\\\",\\n    \\\"Luxembourg\\\",\\n    \\\"Macao\\\",\\n    \\\"Madagascar\\\",\\n    \\\"Malawi\\\",\\n    \\\"Malaysia\\\",\\n    \\\"Maldives\\\",\\n    \\\"Mali\\\",\\n    \\\"Malta\\\",\\n    \\\"Marshall Islands (the)\\\",\\n    \\\"Martinique\\\",\\n    \\\"Mauritania\\\",\\n    \\\"Mauritius\\\",\\n    \\\"Mayotte\\\",\\n    \\\"Mexico\\\",\\n    \\\"Micronesia (Federated States of)\\\",\\n    \\\"Moldova (the Republic of)\\\",\\n    \\\"Monaco\\\",\\n    \\\"Mongolia\\\",\\n    \\\"Montenegro\\\",\\n    \\\"Montserrat\\\",\\n    \\\"Morocco\\\",\\n    \\\"Mozambique\\\",\\n    \\\"Myanmar\\\",\\n    \\\"Namibia\\\",\\n    \\\"Nauru\\\",\\n    \\\"Nepal\\\",\\n    \\\"Netherlands (the)\\\",\\n    \\\"New Caledonia\\\",\\n    \\\"New Zealand\\\",\\n    \\\"Nicaragua\\\",\\n    \\\"Niger (the)\\\",\\n    \\\"Nigeria\\\",\\n    \\\"Niue\\\",\\n    \\\"Norfolk Island\\\",\\n    \\\"Northern Mariana Islands (the)\\\",\\n    \\\"Norway\\\",\\n    \\\"Oman\\\",\\n    \\\"Pakistan\\\",\\n    \\\"Palau\\\",\\n    \\\"Palestine, State of\\\",\\n    \\\"Panama\\\",\\n    \\\"Papua New Guinea\\\",\\n    \\\"Paraguay\\\",\\n    \\\"Peru\\\",\\n    \\\"Philippines (the)\\\",\\n    \\\"Pitcairn\\\",\\n    \\\"Poland\\\",\\n    \\\"Portugal\\\",\\n    \\\"Puerto Rico\\\",\\n    \\\"Qatar\\\",\\n    \\\"Republic of North Macedonia\\\",\\n    \\\"Romania\\\",\\n    \\\"Russian Federation (the)\\\",\\n    \\\"Rwanda\\\",\\n    \\\"R\\xE9union\\\",\\n    \\\"Saint Barth\\xE9lemy\\\",\\n    \\\"Saint Helena, Ascension and Tristan da Cunha\\\",\\n    \\\"Saint Kitts and Nevis\\\",\\n    \\\"Saint Lucia\\\",\\n    \\\"Saint Martin (French part)\\\",\\n    \\\"Saint Pierre and Miquelon\\\",\\n    \\\"Saint Vincent and the Grenadines\\\",\\n    \\\"Samoa\\\",\\n    \\\"San Marino\\\",\\n    \\\"Sao Tome and Principe\\\",\\n    \\\"Saudi Arabia\\\",\\n    \\\"Senegal\\\",\\n    \\\"Serbia\\\",\\n    \\\"Seychelles\\\",\\n    \\\"Sierra Leone\\\",\\n    \\\"Singapore\\\",\\n    \\\"Sint Maarten (Dutch part)\\\",\\n    \\\"Slovakia\\\",\\n    \\\"Slovenia\\\",\\n    \\\"Solomon Islands\\\",\\n    \\\"Somalia\\\",\\n    \\\"South Africa\\\",\\n    \\\"South Georgia and the South Sandwich Islands\\\",\\n    \\\"South Sudan\\\",\\n    \\\"Spain\\\",\\n    \\\"Sri Lanka\\\",\\n    \\\"Sudan (the)\\\",\\n    \\\"Suriname\\\",\\n    \\\"Svalbard and Jan Mayen\\\",\\n    \\\"Sweden\\\",\\n    \\\"Switzerland\\\",\\n    \\\"Syrian Arab Republic\\\",\\n    \\\"Taiwan\\\",\\n    \\\"Tajikistan\\\",\\n    \\\"Tanzania, United Republic of\\\",\\n    \\\"Thailand\\\",\\n    \\\"Timor-Leste\\\",\\n    \\\"Togo\\\",\\n    \\\"Tokelau\\\",\\n    \\\"Tonga\\\",\\n    \\\"Trinidad and Tobago\\\",\\n    \\\"Tunisia\\\",\\n    \\\"Turkey\\\",\\n    \\\"Turkmenistan\\\",\\n    \\\"Turks and Caicos Islands (the)\\\",\\n    \\\"Tuvalu\\\",\\n    \\\"Uganda\\\",\\n    \\\"Ukraine\\\",\\n    \\\"United Arab Emirates (the)\\\",\\n    \\\"United Kingdom of Great Britain and Northern Ireland (the)\\\",\\n    \\\"United States Minor Outlying Islands (the)\\\",\\n    \\\"United States of America (the)\\\",\\n    \\\"Uruguay\\\",\\n    \\\"Uzbekistan\\\",\\n    \\\"Vanuatu\\\",\\n    \\\"Venezuela (Bolivarian Republic of)\\\",\\n    \\\"Viet Nam\\\",\\n    \\\"Virgin Islands (British)\\\",\\n    \\\"Virgin Islands (U.S.)\\\",\\n    \\\"Wallis and Futuna\\\",\\n    \\\"Western Sahara\\\",\\n    \\\"Yemen\\\",\\n    \\\"Zambia\\\",\\n    \\\"Zimbabwe\\\",\\n    \\\"\\xC5land Islands\\\"\\n  ];\\n\\n  return (\\n    <CDBContainer>\\n        <CDBAutocomplete label=\\\"Which country are you from\\\" suggestions={countryList} />\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Autocomplete usage within a Card\"), mdx(CDBCard, {\n    style: {\n      width: \"100%\"\n    },\n    mdxType: \"CDBCard\"\n  }, mdx(CDBCardBody, {\n    className: \"mx-4\",\n    mdxType: \"CDBCardBody\"\n  }, mdx(\"div\", {\n    className: \"text-center\"\n  }, mdx(\"h3\", {\n    className: \"dark-grey-text mb-5\"\n  }, \"Sign in\")), mdx(CDBInput, {\n    label: \"Your email\",\n    group: true,\n    type: \"email\",\n    validate: true,\n    error: \"wrong\",\n    success: \"right\",\n    mdxType: \"CDBInput\"\n  }), mdx(CDBInput, {\n    label: \"Your password\",\n    group: true,\n    type: \"password\",\n    validate: true,\n    containerClass: \"mb-0\",\n    mdxType: \"CDBInput\"\n  }), mdx(CDBAutocomplete, {\n    suggestions: [\"White\", \"Black\", \"Green\", \"Blue\", \"Yellow\", \"Red\"],\n    label: \"Choose a Color\",\n    mdxType: \"CDBAutocomplete\"\n  }), mdx(\"div\", {\n    className: \"text-center pt-3 mb-3\"\n  }, mdx(CDBBtn, {\n    type: \"button\",\n    gradient: \"blue\",\n    className: \"mx-0 btn-block\",\n    mdxType: \"CDBBtn\"\n  }, \"Sign in\")), mdx(\"p\", {\n    className: \"dark-grey-text text-right d-flex justify-content-center mb-3 pt-2\",\n    style: {\n      fontSize: \"0.8rem\"\n    }\n  }, \"or Sign up with:\"), mdx(\"div\", {\n    className: \"row my-3 d-flex justify-content-center\"\n  }, mdx(CDBBtn, {\n    type: \"button\",\n    color: \"white\",\n    circle: true,\n    className: \"mr-md-3\",\n    mdxType: \"CDBBtn\"\n  }, mdx(CDBIcon, {\n    fab: true,\n    icon: \"facebook-f\",\n    className: \"blue-text text-center\",\n    mdxType: \"CDBIcon\"\n  })), mdx(CDBBtn, {\n    type: \"button\",\n    color: \"white\",\n    circle: true,\n    className: \"mr-md-3\",\n    mdxType: \"CDBBtn\"\n  }, mdx(CDBIcon, {\n    fab: true,\n    icon: \"twitter\",\n    className: \"blue-text\",\n    mdxType: \"CDBIcon\"\n  })), mdx(CDBBtn, {\n    type: \"button\",\n    color: \"white\",\n    circle: true,\n    className: \"z-depth-1a\",\n    mdxType: \"CDBBtn\"\n  }, mdx(CDBIcon, {\n    fab: true,\n    icon: \"google-plus-g\",\n    className: \"blue-text\",\n    mdxType: \"CDBIcon\"\n  }))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBAutocomplete, CDBIcon, CDBCard, CDBBtn, CDBCardBody, CDBInput, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Autocomplete = () => {\\n\\n  return (\\n    <CDBContainer>\\n              <CDBCard style={{ width: \\\"100%\\\" }}>\\n                <CDBCardBody className=\\\"mx-4\\\">\\n                  <div className=\\\"text-center\\\">\\n                    <h3 className=\\\"dark-grey-text mb-5\\\">\\n                      <strong>Sign in</strong>\\n                    </h3>\\n                  </div>\\n                  <CDBInput\\n                    label=\\\"Your email\\\"\\n                    group\\n                    type=\\\"email\\\"\\n                    validate\\n                    error=\\\"wrong\\\"\\n                    success=\\\"right\\\"\\n                  />\\n                  <CDBInput\\n                    label=\\\"Your password\\\"\\n                    group\\n                    type=\\\"password\\\"\\n                    validate\\n                    containerClass=\\\"mb-0\\\"\\n                  />\\n                    <CDBAutocomplete\\n                    suggestions={[\\\"White\\\", \\\"Black\\\", \\\"Green\\\", \\\"Blue\\\", \\\"Yellow\\\", \\\"Red\\\"]}\\n                    label=\\\"Choose a Color\\\"\\n                    />\\n                  <div className=\\\"text-center pt-3 mb-3\\\">\\n                    <CDBBtn\\n                      type=\\\"button\\\"\\n                      gradient=\\\"blue\\\"\\n                      className=\\\"mx-0 btn-block\\\"\\n                    >\\n                      Sign in\\n                    </CDBBtn>\\n                  </div>\\n                  <p\\n                    className=\\\"dark-grey-text text-right d-flex justify-content-center mb-3 pt-2\\\"\\n                    style={{ fontSize: \\\"0.8rem\\\" }}\\n                  >\\n                    or Sign up with:\\n                  </p>\\n                  <div className=\\\"row my-3 d-flex justify-content-center\\\">\\n                    <CDBBtn\\n                      type=\\\"button\\\"\\n                      color=\\\"white\\\"\\n                      circle\\n                      className=\\\"mr-md-3\\\"\\n                    >\\n                      <CDBIcon\\n                        fab\\n                        icon=\\\"facebook-f\\\"\\n                        className=\\\"blue-text text-center\\\"\\n                      />\\n                    </CDBBtn>\\n                    <CDBBtn\\n                      type=\\\"button\\\"\\n                      color=\\\"white\\\"\\n                      circle\\n                      className=\\\"mr-md-3\\\"\\n                    >\\n                      <CDBIcon fab icon=\\\"twitter\\\" className=\\\"blue-text\\\" />\\n                    </CDBBtn>\\n                    <CDBBtn\\n                      type=\\\"button\\\"\\n                      color=\\\"white\\\"\\n                      circle\\n                      className=\\\"z-depth-1a\\\"\\n                    >\\n                      <CDBIcon fab icon=\\\"google-plus-g\\\" className=\\\"blue-text\\\" />\\n                    </CDBBtn>\\n                  </div>\\n                </CDBCardBody>\\n              </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Autocomplete With Functions\"), mdx(CDBAutocomplete, {\n    suggestions: [\"Football\", \"Basketball\", \"Baseball\", \"Sprint\", \"Wrestling\"],\n    label: \"Choose a sport\",\n    getValue: function getValue(value) {\n      return alert(value);\n    },\n    mdxType: \"CDBAutocomplete\"\n  }), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBAutocomplete } from \\\"cdbreact\\\";\\n\\nexport const Autocomplete = () => {\\n    \\n    const suggestions = [\\\"Football\\\", \\\"Basketball\\\", \\\"Baseball\\\", \\\"Sprint\\\", \\\"Wrestling\\\"]\\n\\n    const useValue = (value) => {\\n        alert(value);\\n    }\\n    \\n    return(\\n        <CDBAutocomplete\\n            suggestions={suggestions}\\n            label=\\\"Choose a sport\\\"\\n            getValue={useValue}\\n        />\\n    );\\n}\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the Autocomplete component. You will find out which modules are required and what the possibilities of configuring the component are, and what events and methods you can use to work with it.\"), mdx(\"h2\", null, \"Contrast Autocomplete Import Statement\"), mdx(\"p\", null, \"You need to import the Contrast Autocomplete component first before using it.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBAutocomplete } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast Autocomplete Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBAutocomplete component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"suggestions\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Array\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"empty array\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Suggestions to display\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBAutocomplete suggestions={\", \"[item1, item2]\", \"} ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"getValue\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Returns input value on onChange event\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBAutocomplete getValue={logValue} ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"label\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets label for Autocomplete input\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBAutocomplete label=\\\"Select your country\\\" .../>\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#autocomplete","title":"Autocomplete","items":[{"url":"#examples","title":"Examples"},{"url":"#autocomplete-usage-within-a-card","title":"Autocomplete usage within a Card"},{"url":"#autocomplete-with-functions","title":"Autocomplete With Functions"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-autocomplete-import-statement","title":"Contrast Autocomplete Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/components/autocomplete.mdx"},"frontmatter":{"metaTitle":"Autocomplete Component for Contrast Bootstrap React","metaDescription":"Building an Autocomplete Component using the Contrast Bootstrap React Package"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"8f965323-37f2-570c-b587-198ffcc7f401"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}