Origami Frontend Components & Services

Demos: o-autocomplete

Enhanced select element

Autocomplete based on static data provided by a select element

<label class="o-forms-field">
      <span class="o-forms-title">
        <span class="o-forms-title__main">Select your country</span>
      </span>
      <span class="o-forms-input o-forms-input--text o-forms-input--select">
        <div data-o-component="o-autocomplete" class="o-autocomplete">
          <select id="my-autocomplete">
            <option value></option>
            <option>Afghanistan</option>
            <option>Akrotiri</option>
            <option>Albania</option>
            <option>Algeria</option>
            <option>American Samoa</option>
            <option>Andorra</option>
            <option>Angola</option>
            <option>Anguilla</option>
            <option>Antarctica</option>
            <option>Antigua and Barbuda</option>
            <option>Argentina</option>
            <option>Armenia</option>
            <option>Aruba</option>
            <option>Ashmore and Cartier Islands</option>
            <option>Australia</option>
            <option>Austria</option>
            <option>Azerbaijan</option>
            <option>Bahamas, The</option>
            <option>Bahrain</option>
            <option>Bangladesh</option>
            <option>Barbados</option>
            <option>Bassas da India</option>
            <option>Belarus</option>
            <option>Belgium</option>
            <option>Belize</option>
            <option>Benin</option>
            <option>Bermuda</option>
            <option>Bhutan</option>
            <option>Bolivia</option>
            <option>Bosnia and Herzegovina</option>
            <option>Botswana</option>
            <option>Bouvet Island</option>
            <option>Brazil</option>
            <option>British Indian Ocean Territory</option>
            <option>British Virgin Islands</option>
            <option>Brunei</option>
            <option>Bulgaria</option>
            <option>Burkina Faso</option>
            <option>Burma</option>
            <option>Burundi</option>
            <option>Cambodia</option>
            <option>Cameroon</option>
            <option>Canada</option>
            <option>Cape Verde</option>
            <option>Cayman Islands</option>
            <option>Central African Republic</option>
            <option>Chad</option>
            <option>Chile</option>
            <option>China</option>
            <option>Christmas Island</option>
            <option>Clipperton Island</option>
            <option>Cocos (Keeling) Islands</option>
            <option>Colombia</option>
            <option>Comoros</option>
            <option>Congo</option>
            <option>Cook Islands</option>
            <option>Coral Sea Islands</option>
            <option>Costa Rica</option>
            <option>Cote d\&apos;Ivoire</option>
            <option>Croatia</option>
            <option>Cuba</option>
            <option>Cyprus</option>
            <option>Czech Republic</option>
            <option>Denmark</option>
            <option>Dhekelia</option>
            <option>Djibouti</option>
            <option>Dominica</option>
            <option>Dominican Republic</option>
            <option>Ecuador</option>
            <option>Egypt</option>
            <option>El Salvador</option>
            <option>Equatorial Guinea</option>
            <option>Eritrea</option>
            <option>Estonia</option>
            <option>Ethiopia</option>
            <option>Europa Island</option>
            <option>Falkland Islands</option>
            <option>Faroe Islands</option>
            <option>Fiji</option>
            <option>Finland</option>
            <option>France</option>
            <option>French Guiana</option>
            <option>French Polynesia</option>
            <option>French Southern and Antarctic Lands</option>
            <option>Gabon</option>
            <option>Gambia,</option>
            <option>Gaza Strip</option>
            <option>Georgia</option>
            <option>Germany</option>
            <option>Ghana</option>
            <option>Gibraltar</option>
            <option>Glorioso Islands</option>
            <option>Greece</option>
            <option>Greenland</option>
            <option>Grenada</option>
            <option>Guadeloupe</option>
            <option>Guam</option>
            <option>Guatemala</option>
            <option>Guernsey</option>
            <option>Guinea</option>
            <option>Guinea-Bissau</option>
            <option>Guyana</option>
            <option>Haiti</option>
            <option>Heard Island and McDonald Islands</option>
            <option>Holy See (Vatican City)</option>
            <option>Honduras</option>
            <option>Hong Kong</option>
            <option>Hungary</option>
            <option>Iceland</option>
            <option>India</option>
            <option>Indonesia</option>
            <option>Iran</option>
            <option>Iraq</option>
            <option>Ireland</option>
            <option>Isle of Man</option>
            <option>Israel</option>
            <option>Italy</option>
            <option>Jamaica</option>
            <option>Jan Mayen</option>
            <option>Japan</option>
            <option>Jersey</option>
            <option>Jordan</option>
            <option>Juan de Nova Island</option>
            <option>Kazakhstan</option>
            <option>Kenya</option>
            <option>Kiribati</option>
            <option>Korea, North</option>
            <option>Korea, South</option>
            <option>Kuwait</option>
            <option>Kyrgyzstan</option>
            <option>Laos</option>
            <option>Latvia</option>
            <option>Lebanon</option>
            <option>Lesotho</option>
            <option>Liberia</option>
            <option>Libya</option>
            <option>Liechtenstein</option>
            <option>Lithuania</option>
            <option>Luxembourg</option>
            <option>Macau</option>
            <option>Macedonia</option>
            <option>Madagascar</option>
            <option>Malawi</option>
            <option>Malaysia</option>
            <option>Maldives</option>
            <option>Mali</option>
            <option>Malta</option>
            <option>Marshall Islands</option>
            <option>Martinique</option>
            <option>Mauritania</option>
            <option>Mauritius</option>
            <option>Mayotte</option>
            <option>Mexico</option>
            <option>Micronesia, Federated States of</option>
            <option>Moldova</option>
            <option>Monaco</option>
            <option>Mongolia</option>
            <option>Montserrat</option>
            <option>Morocco</option>
            <option>Mozambique</option>
            <option>Namibia</option>
            <option>Nauru</option>
            <option>Navassa Island</option>
            <option>Nepal</option>
            <option>Netherlands</option>
            <option>Netherlands Antilles</option>
            <option>New Caledonia</option>
            <option>New Zealand</option>
            <option>Nicaragua</option>
            <option>Niger</option>
            <option>Nigeria</option>
            <option>Niue</option>
            <option>Norfolk Island</option>
            <option>Northern Mariana Islands</option>
            <option>Norway</option>
            <option>Oman</option>
            <option>Pakistan</option>
            <option>Palau</option>
            <option>Panama</option>
            <option>Papua New Guinea</option>
            <option>Paracel Islands</option>
            <option>Paraguay</option>
            <option>Peru</option>
            <option>Philippines</option>
            <option>Pitcairn Islands</option>
            <option>Poland</option>
            <option>Portugal</option>
            <option>Puerto Rico</option>
            <option>Qatar</option>
            <option>Reunion</option>
            <option>Romania</option>
            <option>Russia</option>
            <option>Rwanda</option>
            <option>Saint Helena</option>
            <option>Saint Kitts and Nevis</option>
            <option>Saint Lucia</option>
            <option>Saint Pierre and Miquelon</option>
            <option>Saint Vincent and the Grenadines</option>
            <option>Samoa</option>
            <option>San Marino</option>
            <option>Sao Tome and Principe</option>
            <option>Saudi Arabia</option>
            <option>Senegal</option>
            <option>Serbia and Montenegro</option>
            <option>Seychelles</option>
            <option>Sierra Leone</option>
            <option>Singapore</option>
            <option>Slovakia</option>
            <option>Slovenia</option>
            <option>Solomon Islands</option>
            <option>Somalia</option>
            <option>South Africa</option>
            <option>South Georgia and the South Sandwich Islands</option>
            <option>Spain</option>
            <option>Spratly Islands</option>
            <option>Sri Lanka</option>
            <option>Sudan</option>
            <option>Suriname</option>
            <option>Svalbard</option>
            <option>Swaziland</option>
            <option>Sweden</option>
            <option>Switzerland</option>
            <option>Syria</option>
            <option>Taiwan</option>
            <option>Tajikistan</option>
            <option>Tanzania</option>
            <option>Thailand</option>
            <option>Timor-Leste</option>
            <option>Togo</option>
            <option>Tokelau</option>
            <option>Tonga</option>
            <option>Trinidad and Tobago</option>
            <option>Tromelin Island</option>
            <option>Tunisia</option>
            <option>Turkey</option>
            <option>Turkmenistan</option>
            <option>Turks and Caicos Islands</option>
            <option>Tuvalu</option>
            <option>Uganda</option>
            <option>Ukraine</option>
            <option>United Arab Emirates</option>
            <option>United Kingdom</option>
            <option>United States</option>
            <option>Uruguay</option>
            <option>Uzbekistan</option>
            <option>Vanuatu</option>
            <option>Venezuela</option>
            <option>Vietnam</option>
            <option>Virgin Islands</option>
            <option>Wake Island</option>
            <option>Wallis and Futuna</option>
            <option>West Bank</option>
            <option>Western Sahara</option>
            <option>Yemen</option>
            <option>Zambia</option>
            <option>Zimbabwe</option>
          </select>
        </div>
      </span>
    </label>

Dynamic options

Autocomplete data is provided by a JavaScript function

<form data-o-component="o-forms">
      <label class="o-forms-field">
        <span class="o-forms-title">
          <span class="o-forms-title__main">Select your country</span>
        </span>
        <span class="o-forms-input o-forms-input--text">
          <div data-o-component="o-autocomplete" data-o-autocomplete-source="customSuggestions" class="o-autocomplete">
            <!-- If the JavaScript executes, then this input will be progressively enhanced to an autocomplete component -->
            <input required type="text" name="text-example" id="my-autocomplete">
          </div>
          <span class="o-forms-input__error">Please fill out this field</span>
        </span>
      </label>
    </form>

Delayed dynamic options

Same as the dynamic demo but the data is purposefully delayed to show the loading state

<form data-o-component="o-forms">
      <label class="o-forms-field">
        <span class="o-forms-title">
          <span class="o-forms-title__main">Select your country</span>
        </span>
        <span class="o-forms-input o-forms-input--text">
          <div data-o-component="o-autocomplete" data-o-autocomplete-source="customSuggestions" class="o-autocomplete">
            <!-- If the JavaScript executes, then this input will be progressively enhanced to an autocomplete component -->
            <input required type="text" name="text-example" id="my-autocomplete">
          </div>
          <span class="o-forms-input__error">Please fill out this field</span>
        </span>
      </label>
    </form>
Status
active
Switch component view

GitHub Repository

Install o-autocomplete

If using the Build Service, add o-autocomplete@^1.3.0 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-autocomplete@^1.3.0".

Help & Support

o-autocomplete is maintained directly by the Origami team. If you have any questions about o-autocomplete or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com