UI Components and Behaviour

Everything the widget draws appears inside the .ccs-window element, below the search input. The input itself stays in your page, so you style it with your own CSS and can read or set its value like any other field.

What the user sees

Component

When it appears

What it does

Code system filter

As soon as bind() runs

A dropdown of the available code systems with their sizes, plus “All code systems”. Changing it re-runs the current search. If defaultCodeSystem is set, it is pre-selected.

Autocomplete dropdown

While typing, after autocompleteMinChars characters (default 2)

Up to 10 suggestions, each showing the code, the display name and the code system.

Search results

After pressing Enter

A header with the total count, then one row per result with the code, the display name (matching words highlighted), the code system and an info button. A Load more button appears when more results exist.

Concept detail panel

After clicking a result’s info button

The concept’s code, name, code system, status, version, definition, synonyms, parent codes, child codes and extra properties, with Back to results and Select this code buttons.

Loading spinner

While a search or a detail panel is loading

Hidden as soon as data arrives.

Keyboard

With the autocomplete dropdown open:

  • Arrow Down / Arrow Up move through the suggestions

  • Enter selects the highlighted suggestion, or runs a full search if none is highlighted

  • Escape closes the dropdown

With the dropdown closed, Enter runs a full search. In the detail panel, Escape returns to the results.

Mouse

  • Hovering highlights a suggestion; clicking selects it

  • Clicking anywhere outside the input and the widget closes the dropdown

  • Clicking a result row selects it; clicking its info button opens the detail panel

  • Select this code in the detail panel selects the concept and closes the panel

What “select” means

Selecting a concept, from a suggestion, a result row or the detail panel:

  1. puts code — display name into the search input,

  2. makes it available from CareConekt.CodeSystems.getSelection(ino),

  3. fires your onSelect(concept, instanceId) callback (see Configuration).

The shape of concept depends on where it was selected from; the Configuration guide shows all three.

Styling

Your page’s CSS cannot reach inside the widget, and the widget’s CSS cannot reach your page, with one deliberate exception: the colour and shadow variables listed in the Configuration guide, which you set on the .ccs-window element. The search input is a normal element in your page; style it however you like.