Autocomplete

Autocomplete component is based on an input and a list. It allows users to search fast a word in a long list while filtering it.

Example

<form autocomplete="off">
    <div class="nj-form-autocomplete" id="autocomplete" tabindex="0" data-options='{"autocomplete":true}'>
       <div class="nj-form-group nj-form-input-search" >
           <div>
               <input class="nj-form-control" type="text" placeholder="Select your country">
                <div class="nj-form-autocomplete__list nj-card border" style="z-index: var(--nj-elevation-dropdown);" >
                  <div class="nj-list-group nj-list-group--no-border nj-list-group--sm">
                    <button type="button" class="nj-list-group__item" data-value=""/>
                  </div>
                </div>
            </div>
        </div>
    </div>
</form>

Usage

//Exposed global variable
<script src="https://assets.design.digital.engie.com/fluid/latest/components/form/index.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
  Form.init();
  const instanceOfAutocomplete = document.querySelector('#autocomplete').nj_form_autocomplete;
  instanceOfAutocomplete.data = [
  {
   name: 'Afghanistan',
   value: 'AF'
  }];
  instanceOfAutocomplete.list = instanceOfAutocomplete.data;
});
</script>

<form autocomplete="off">
    <div class="nj-form-autocomplete" id="autocomplete" tabindex="0" data-options='{"autocomplete":true}'>
        <div class="nj-form-group nj-form-input-search" >
           <div>
               <input class="nj-form-control" type="text" placeholder="Select your country">
                <div class="nj-form-autocomplete__list nj-card border" >
                  <div class="nj-list-group nj-list-group--no-border nj-list-group--sm">
                    <button type="button" class="nj-list-group__item" data-value=""></button>
                  </div>
                </div>
            </div>
        </div>
    </div>
</form>

//Initialization via webcomponents
   
import React, { useEffect } from 'react';
import { FormWC } from '@engie-group/fluid-design-system/lib-esm/components/form';
   
const App = () => {
  ...
  useEffect(() => {
    FormWC.init();
  }, []);
     ...
}
   
export default App;

<form autoComplete="off">
    <nj-form-autocomplete data-list='[{"name":"Afghanistan","value":"AF"},{"name":"Åland Islands","value":"AX"},{"name":"Albania","value":"AL"}]' data-options='{"autocomplete":true,"limit":10}'>
        <div className="nj-form-autocomplete" tabIndex="0">
            <nj-form-input-text>
                <nj-form-input-search>
                    <div className="nj-form-group nj-form-input-search nj-form-group--icon-right">
                        <div>
                            <input className="nj-form-control" type="text" placeholder="Search" minLength="2" required role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" />
                            <i className="material-icons nj-form-control__search">search</i>
                            <i className="material-icons nj-form-control__reset">close</i>
                            <div className="nj-form-autocomplete__list nj-card border">
                                <div className="nj-list-group nj-list-group--no-border nj-list-group--sm" role="listbox" tabIndex="-1">
                                    <button type="button" className="nj-list-group__item" role="option" tabIndex="-1"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </nj-form-input-search>
            </nj-form-input-text>
        </div>
    </nj-form-autocomplete>
</form>

With search input

<form autocomplete="off">
<div class="nj-form-autocomplete" tabindex="0" data-list='[{"name":"Afghanistan","value":"AF"},{"name":"Åland Islands","value":"AX"},{"name":"Albania","value":"AL"},{"name":"Algeria","value":"DZ"},{"name":"American Samoa","value":"AS"},{"name":"AndorrA","value":"AD"},{"name":"Angola","value":"AO"},{"name":"Anguilla","value":"AI"},{"name":"Antarctica","value":"AQ"},{"name":"Antigua and Barbuda","value":"AG"},{"name":"Argentina","value":"AR"},{"name":"Armenia","value":"AM"},{"name":"Aruba","value":"AW"},{"name":"Australia","value":"AU"},{"name":"Austria","value":"AT"},{"name":"Azerbaijan","value":"AZ"},{"name":"Bahamas","value":"BS"},{"name":"Bahrain","value":"BH"},{"name":"Bangladesh","value":"BD"},{"name":"Barbados","value":"BB"},{"name":"Belarus","value":"BY"},{"name":"Belgium","value":"BE"},{"name":"Belize","value":"BZ"},{"name":"Benin","value":"BJ"},{"name":"Bermuda","value":"BM"},{"name":"Bhutan","value":"BT"},{"name":"Bolivia","value":"BO"},{"name":"Bosnia and Herzegovina","value":"BA"},{"name":"Botswana","value":"BW"},{"name":"Bouvet Island","value":"BV"},{"name":"Brazil","value":"BR"},{"name":"British Indian Ocean Territory","value":"IO"},{"name":"Brunei Darussalam","value":"BN"},{"name":"Bulgaria","value":"BG"},{"name":"Burkina Faso","value":"BF"},{"name":"Burundi","value":"BI"},{"name":"Cambodia","value":"KH"},{"name":"Cameroon","value":"CM"},{"name":"Canada","value":"CA"},{"name":"Cape Verde","value":"CV"},{"name":"Cayman Islands","value":"KY"},{"name":"Central African Republic","value":"CF"},{"name":"Chad","value":"TD"},{"name":"Chile","value":"CL"},{"name":"China","value":"CN"},{"name":"Christmas Island","value":"CX"},{"name":"Cocos (Keeling) Islands","value":"CC"},{"name":"Colombia","value":"CO"},{"name":"Comoros","value":"KM"},{"name":"Congo","value":"CG"},{"name":"Congo, The Democratic Republic of the","value":"CD"},{"name":"Cook Islands","value":"CK"},{"name":"Costa Rica","value":"CR"},{"name":"Croatia","value":"HR"},{"name":"Cuba","value":"CU"},{"name":"Cyprus","value":"CY"},{"name":"Czech Republic","value":"CZ"},{"name":"Denmark","value":"DK"},{"name":"Djibouti","value":"DJ"},{"name":"Dominica","value":"DM"},{"name":"Dominican Republic","value":"DO"},{"name":"Ecuador","value":"EC"},{"name":"Egypt","value":"EG"},{"name":"El Salvador","value":"SV"},{"name":"Equatorial Guinea","value":"GQ"},{"name":"Eritrea","value":"ER"},{"name":"Estonia","value":"EE"},{"name":"Ethiopia","value":"ET"},{"name":"Falkland Islands (Malvinas)","value":"FK"},{"name":"Faroe Islands","value":"FO"},{"name":"Fiji","value":"FJ"},{"name":"Finland","value":"FI"},{"name":"France","value":"FR"},{"name":"French Guiana","value":"GF"},{"name":"French Polynesia","value":"PF"},{"name":"French Southern Territories","value":"TF"},{"name":"Gabon","value":"GA"},{"name":"Gambia","value":"GM"},{"name":"Georgia","value":"GE"},{"name":"Germany","value":"DE"},{"name":"Ghana","value":"GH"},{"name":"Gibraltar","value":"GI"},{"name":"Greece","value":"GR"},{"name":"Greenland","value":"GL"},{"name":"Grenada","value":"GD"},{"name":"Guadeloupe","value":"GP"},{"name":"Guam","value":"GU"},{"name":"Guatemala","value":"GT"},{"name":"Guernsey","value":"GG"},{"name":"Guinea","value":"GN"},{"name":"Guinea-Bissau","value":"GW"},{"name":"Guyana","value":"GY"},{"name":"Haiti","value":"HT"},{"name":"Heard Island and Mcdonald Islands","value":"HM"},{"name":"Holy See (Vatican City State)","value":"VA"},{"name":"Honduras","value":"HN"},{"name":"Hong Kong","value":"HK"},{"name":"Hungary","value":"HU"},{"name":"Iceland","value":"IS"},{"name":"India","value":"IN"},{"name":"Indonesia","value":"ID"},{"name":"Iran, Islamic Republic Of","value":"IR"},{"name":"Iraq","value":"IQ"},{"name":"Ireland","value":"IE"},{"name":"Isle of Man","value":"IM"},{"name":"Israel","value":"IL"},{"name":"Italy","value":"IT"},{"name":"Jamaica","value":"JM"},{"name":"Japan","value":"JP"},{"name":"Jersey","value":"JE"},{"name":"Jordan","value":"JO"},{"name":"Kazakhstan","value":"KZ"},{"name":"Kenya","value":"KE"},{"name":"Kiribati","value":"KI"},{"name":"Korea, Republic of","value":"KR"},{"name":"Kuwait","value":"KW"},{"name":"Kyrgyzstan","value":"KG"},{"name":"Latvia","value":"LV"},{"name":"Lebanon","value":"LB"},{"name":"Lesotho","value":"LS"},{"name":"Liberia","value":"LR"},{"name":"Libyan Arab Jamahiriya","value":"LY"},{"name":"Liechtenstein","value":"LI"},{"name":"Lithuania","value":"LT"},{"name":"Luxembourg","value":"LU"},{"name":"Macao","value":"MO"},{"name":"Macedonia, The Former Yugoslav Republic of","value":"MK"},{"name":"Madagascar","value":"MG"},{"name":"Malawi","value":"MW"},{"name":"Malaysia","value":"MY"},{"name":"Maldives","value":"MV"},{"name":"Mali","value":"ML"},{"name":"Malta","value":"MT"},{"name":"Marshall Islands","value":"MH"},{"name":"Martinique","value":"MQ"},{"name":"Mauritania","value":"MR"},{"name":"Mauritius","value":"MU"},{"name":"Mayotte","value":"YT"},{"name":"Mexico","value":"MX"},{"name":"Micronesia, Federated States of","value":"FM"},{"name":"Moldova, Republic of","value":"MD"},{"name":"Monaco","value":"MC"},{"name":"Mongolia","value":"MN"},{"name":"Montserrat","value":"MS"},{"name":"Morocco","value":"MA"},{"name":"Mozambique","value":"MZ"},{"name":"Myanmar","value":"MM"},{"name":"Namibia","value":"NA"},{"name":"Nauru","value":"NR"},{"name":"Nepal","value":"NP"},{"name":"Netherlands","value":"NL"},{"name":"Netherlands Antilles","value":"AN"},{"name":"New Caledonia","value":"NC"},{"name":"New Zealand","value":"NZ"},{"name":"Nicaragua","value":"NI"},{"name":"Niger","value":"NE"},{"name":"Nigeria","value":"NG"},{"name":"Niue","value":"NU"},{"name":"Norfolk Island","value":"NF"},{"name":"Northern Mariana Islands","value":"MP"},{"name":"Norway","value":"NO"},{"name":"Oman","value":"OM"},{"name":"Pakistan","value":"PK"},{"name":"Palau","value":"PW"},{"name":"Palestinian Territory, Occupied","value":"PS"},{"name":"Panama","value":"PA"},{"name":"Papua New Guinea","value":"PG"},{"name":"Paraguay","value":"PY"},{"name":"Peru","value":"PE"},{"name":"Philippines","value":"PH"},{"name":"Pitcairn","value":"PN"},{"name":"Poland","value":"PL"},{"name":"Portugal","value":"PT"},{"name":"Puerto Rico","value":"PR"},{"name":"Qatar","value":"QA"},{"name":"Reunion","value":"RE"},{"name":"Romania","value":"RO"},{"name":"Russian Federation","value":"RU"},{"name":"RWANDA","value":"RW"},{"name":"Saint Helena","value":"SH"},{"name":"Saint Kitts and Nevis","value":"KN"},{"name":"Saint Lucia","value":"LC"},{"name":"Saint Pierre and Miquelon","value":"PM"},{"name":"Saint Vincent and the Grenadines","value":"VC"},{"name":"Samoa","value":"WS"},{"name":"San Marino","value":"SM"},{"name":"Sao Tome and Principe","value":"ST"},{"name":"Saudi Arabia","value":"SA"},{"name":"Senegal","value":"SN"},{"name":"Serbia and Montenegro","value":"CS"},{"name":"Seychelles","value":"SC"},{"name":"Sierra Leone","value":"SL"},{"name":"Singapore","value":"SG"},{"name":"Slovakia","value":"SK"},{"name":"Slovenia","value":"SI"},{"name":"Solomon Islands","value":"SB"},{"name":"Somalia","value":"SO"},{"name":"South Africa","value":"ZA"},{"name":"South Georgia and the South Sandwich Islands","value":"GS"},{"name":"Spain","value":"ES"},{"name":"Sri Lanka","value":"LK"},{"name":"Sudan","value":"SD"},{"name":"Suriname","value":"SR"},{"name":"Svalbard and Jan Mayen","value":"SJ"},{"name":"Swaziland","value":"SZ"},{"name":"Sweden","value":"SE"},{"name":"Switzerland","value":"CH"},{"name":"Syrian Arab Republic","value":"SY"},{"name":"Taiwan, Province of China","value":"TW"},{"name":"Tajikistan","value":"TJ"},{"name":"Tanzania, United Republic of","value":"TZ"},{"name":"Thailand","value":"TH"},{"name":"Timor-Leste","value":"TL"},{"name":"Togo","value":"TG"},{"name":"Tokelau","value":"TK"},{"name":"Tonga","value":"TO"},{"name":"Trinidad and Tobago","value":"TT"},{"name":"Tunisia","value":"TN"},{"name":"Turkey","value":"TR"},{"name":"Turkmenistan","value":"TM"},{"name":"Turks and Caicos Islands","value":"TC"},{"name":"Tuvalu","value":"TV"},{"name":"Uganda","value":"UG"},{"name":"Ukraine","value":"UA"},{"name":"United Arab Emirates","value":"AE"},{"name":"United Kingdom","value":"GB"},{"name":"United States","value":"US"},{"name":"United States Minor Outlying Islands","value":"UM"},{"name":"Uruguay","value":"UY"},{"name":"Uzbekistan","value":"UZ"},{"name":"Vanuatu","value":"VU"},{"name":"Venezuela","value":"VE"},{"name":"Viet Nam","value":"VN"},{"name":"Virgin Islands, British","value":"VG"},{"name":"Virgin Islands, U.S.","value":"VI"},{"name":"Wallis and Futuna","value":"WF"},{"name":"Western Sahara","value":"EH"},{"name":"Yemen","value":"YE"},{"name":"Zambia","value":"ZM"},{"name":"Zimbabwe","value":"ZW"}]' data-options='{"autocomplete":true,"limit":10}' >
   <div class="nj-form-group nj-form-input-search nj-form-group--icon-right" style="z-index: var(--nj-elevation-dropdown);">
       <div>
           <input class="nj-form-control" type="text" placeholder="Search a country" minlength="2" required role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true">
           <i class="material-icons nj-form-control__search">search</i>
           <i class="material-icons nj-form-control__reset">close</i>
           <div class="nj-form-autocomplete__list nj-card border">
               <div class="nj-list-group nj-list-group--no-border nj-list-group--sm" role="listbox" tabindex="-1">
                    <button type="button" class="nj-list-group__item" role="option" tabindex="-1"></button>
               </div>
           </div>
        </div>
    </div>
</div>
</form>

Tag attribute / property

Use tag attribute to initiate component. You can initiate via JavaScript too.

Root Tag

Attribute	Description
`data-list`	Array of json objects Display a filtered data list while user is filling input field. name displayed text value reference value. Value will be copied on user interaction to input field and component root tag. `data-list='[{"name":"Afghanistan","value":"AF"},{"name":"Åland Islands","value":"AX"},{"name":"Albania","value":"AL"},...}]'`
`data-options`	Json object Settings autocomplete true\|false Activate suggestion list limit number \| false Limit the number of items displayed `data-options='{"autocomplete":true,"limit":10}'`
`nj_form_autocomplete`	get Autocomplete instance `const instanceOfAutocomplete = document.querySelector('#autocomplete').nj_form_autocomplete;`

Input

Attribute	Description
`minlength`	set minlength input attribute to toggle list display
`required`	set required input to toggle list display

Methods

You can initiate and take control of autocomplete component via javascript.

Method	Description
`data`	set or get Array of json objects Array<{ name: string; value: string }> Database used to populate list while user is filling input field. instanceOfAutocomplete.data = [ { name: ‘Afghanistan’, value: ‘AF’},…];
`list`	set or get Array of json objects Array<{ name: string; value: string }> Filter given array then display items or return displayed list. instanceOfAutocomplete.list = [ { name: ‘Afghanistan’, value: ‘AF’},…];
`onKeyDown`	WCAG
`onInputChange`	Populate list with data
`onSelectListItem`	Fill input with user selection
`onUserSelectItem`	a simple function to override to get selected name and value instance.onUserSelectItem = ({name, value}) => { console.log(name,value);}
`getInstance`	Static method which allows you to get the AutoComplete instance associated to a DOM element, you can use it like this: `NJ.Form.AutoComplete.getInstance( element )`