Building an ICD-10 Autocomplete Search Bar¶

Data entry errors during medical coding frequently result in costly claim denials. Providing an auto-completing ICD-10-CM search bar ensures that physicians and coders select valid, highly-specific diagnosis codes.

In this tutorial, we will use plain JavaScript and the Bedrock Billing Reference API to build a search bar that returns instantaneous ICD-10 code suggestions.

The API Endpoint¶

We will target the /api/v1/icd10cm/search endpoint. It accepts a q parameter and performs a lightning-fast fuzzy match against the current fiscal year's ICD-10-CM registry.

Frontend Implementation¶

Here is a minimal HTML and JavaScript example implementing the search bar.

<!DOCTYPE html>
<html>
<head>
    <title>ICD-10 Autocomplete</title>
    <style>
        .suggestion-box { border: 1px solid #ccc; max-width: 400px; display: none; }
        .suggestion-item { padding: 8px; cursor: pointer; border-bottom: 1px solid #eee; }
        .suggestion-item:hover { background-color: #f0f0f0; }
        .code-pill { font-weight: bold; color: #2E8B57; margin-right: 10px; }
    </style>
</head>
<body>

    <h2>Diagnosis Search</h2>
    <input type="text" id="icd-search" placeholder="Search a condition (e.g., Asthma)..." autocomplete="off" style="width: 400px; padding: 10px;">
    <div id="suggestions" class="suggestion-box"></div>

    <script>
        const searchInput = document.getElementById('icd-search');
        const suggestionsBox = document.getElementById('suggestions');
        const API_KEY = 'sk_live_your_public_key'; // Use restricted, origin-bound keys for frontend requests!

        searchInput.addEventListener('input', async (e) => {
            const query = e.target.value;

            if (query.length < 3) {
                suggestionsBox.style.display = 'none';
                return;
            }

            // Fetch matching ICD-10 codes from Bedrock Billing
            const response = await fetch(`https://api.bedrockbilling.com/api/v1/icd10cm-data/diagnosis/search?code=${encodeURIComponent(query)}&year=2026&limit=5`, {
                headers: { 'Authorization': `Bearer ${API_KEY}` }
            });

            if (response.ok) {
                const results = await response.json();
                renderSuggestions(results);
            }
        });

        function renderSuggestions(results) {
            suggestionsBox.innerHTML = '';

            if (results.length === 0) {
                suggestionsBox.style.display = 'none';
                return;
            }

            results.forEach(item => {
                const div = document.createElement('div');
                div.className = 'suggestion-item';
                div.innerHTML = `<span class="code-pill">${item.code}</span> ${item.description}`;

                // When a user clicks a suggestion, populate the input
                div.onclick = () => {
                    searchInput.value = item.code;
                    suggestionsBox.style.display = 'none';
                };

                suggestionsBox.appendChild(div);
            });

            suggestionsBox.style.display = 'block';
        }
    </script>
</body>
</html>

Expanding the Use Case¶

Once you have the ICD-10 search bar operational, you can pipe the selected diagnosis codes directly into the Medicare Code Editor (MCE) or Integrated Outpatient Code Editor (IOCE) modules on the Bedrock Billing API to validate the clinical coherence of the selected codes (e.g., ensuring a pediatric code was not accidentally selected for an adult patient).