The package supports two basic types of autocompleters. Autocompleters whose lists are small enough to be fully specified at construction time are called "Prefetch", and are supported by autoCompPrefetch.js. Autocompleters whose lists are shown in small, AJAX-retrieved chunks that match the user's input are called "Search", and are supported by autoCompSearch.js.
Below are a few demos of the features and the code to use them.
A Few DemosA prefetch autocompleter that allows entry of off-list items:
Some complete HTML page examples hosted on Plunker:
- Medical condition lookup showing how to obtain the ICD-9 code
- Drug name lookup with a strength list and an RxCUI code field
- Section 508-compliant (i.e., accessible to screen readers)
- Supports coded-value lists
- Supports headings for groups of items in lists
- Two-column lists when there is not enough space on the page to show the list in a single column.
- Numbered list items (optional).
- Can require that an entry in the field match the list.
- Multi-select lists
- Table-format for list items with multiple fields
- Event listeners for various things like "list selection".
- Provides a way to get extra information about the record associated with a list item. (See recordDataRequester.js.)
- Support for list suggestions in the search (AJAX) autocompleter, when the user does not pick an item in the list. (Currently this is for single-select lists only.)
- "autofill" option, which fills in the field automatically if there is just one list item
- Default value (optional), which gets placed in the field when the field gets focus (along with showing the list).
- A "see more" link on the search autocompleter which provides an expanded list of items.
- Search buttons (optional) for search autocompleters to make them show an expanded results list. (Without a button, the user can click on the "see more" link.)
- A results cache for the search autocompleter, so that repeats of AJAX calls for the same list items are not necessary.
There are four ways to install and use autocomplete-lhc code:
- Linking directly to the browser-ready release files hosted on the Clinical Table Search Service website. (See "Using the Hosted Browser-Ready Releases" below).
- Downloading the latest release from the release zip files hosted the Clinical Table Search Service website.
- Using npm:
npm install autocomplete-lhc. To use this, you would need to run the code through something webpack to build a version usable in a web browser.
- Using bower:
bower install autocomplete-lhc. These files are ready to use in a web browser. However, note that bower itself is now deprecated, so you would not want to start a new project using it.
Using the Hosted Browser-Ready Releases
Starting with version 17, this package does not bundle its jQuery depenendency, so you will need to include that separately, but that can be obtained from one of several CDNs (an example of which is below).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- example CDN-- you may choose another source -->
(Note that you can substitute for "17.0.3" one of the other prebuilt versions available at https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions).
For the CSS, include:
<link href="https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.3/autocomplete-lhc.min.css" rel="stylesheet" />
This software, autocomplete-lhc, was developed by the National Library of Medicine (NLM) Lister Hill National Center for Biomedical Communications (LHNCBC), part of the National Institutes of Health (NIH).
Please cite as:
Lister Hill National Center for Biomedical Communications
National Library of Medicine
This software is distributed under a BSD-style open-source license. See LICENSE.md.
No warranty or indemnification for damages resulting from claims brought by third parties whose proprietary rights may be infringed by your usage of this software are provided by any of the owners.