Combobox is a JavaScript plugin that will automatically turn a regular ol‘ select element into an autocomplete. It is only 6KB minified and doesn‘t have any dependencies. It comes with some default styles, but provides markup that can be easily customized if needed. It was built with accesibility in mind and makes full use of ARIA attributes and roles to be screen reader friendly.
Include the styles in the head of your document.
<link rel="stylesheet" href="https://unpkg.com/select-combobox/dist/combobox.css">
Include the script at the bottom of the body.
<script src="https://unpkg.com/select-combobox/dist/combobox.js"></script>
Add a new <select> element with the class autocomplete.
Make sure your select is wrapped in a container and it has a label within that container.
<div>
<label for="example">Example</label>
<select id="example" class="autocomplete">
<option value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
</select>
</div>
Do the following. Note :input_field can be named something more specific to your case. autocomplete__input is a required id name, however.
attr_accessor :input_field params[:input_field] <%= hidden_field :input_field, id: "autocomplete__input" %>npm install && gulp
Build js file: gulp js
Build scss file: gulp sass