Autocomplete

Whenever a field has the ability to autocomplete its value, we should add a hint in form of placeholder and also an icon on the left that shows a spinner while loading from remote. OBS provides an autocomplete partial, including JavaScript for handling the autocomplete request and spinner. For further customization of autocomplete events, please refer to the jQuery autocomplete documentation.

Example

Input with autocompletion

Label:

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
%h5 Input with autocompletion

// Below is the content of the autocomplete partial. Render it in your view, e.g.
// "render partial: 'webui/autocomplete', locals: { html_id: 'linked_project', label: 'Original project name', source: autocomplete_projects_path }"
.form-group.ui-front
  %label{ for: 'input-id' }
    Label:
  .input-group
    .input-group-prepend
      %span.input-group-text
        %i.fas.fa-search
    %input.form-control.obs-autocomplete#input-id{ data: { source: '/path/to/autocomplete/data' },
                                                           type: 'text', placeholder: 'Type to autocomplete...' }