Typeahead suggestions
GET /v1/drugs/suggestions returns distinct names while a user types, for autocomplete fields.
Request
curl -G https://api.medifontis.com/v1/drugs/suggestions \
-H "Authorization: Bearer $MEDIFONTIS_API_KEY" \
--data-urlencode "country=au" \
--data-urlencode "q=para" \
--data-urlencode "limit=8"const params = new URLSearchParams({ country: 'au', q: 'para', limit: '8' })
const response = await fetch(`https://api.medifontis.com/v1/drugs/suggestions?${params}`, {
headers: { Authorization: `Bearer ${process.env.MEDIFONTIS_API_KEY}` },
})
if (!response.ok) throw new Error(`Medifontis ${response.status}`)
const { suggestions } = await response.json()import os
import requests
response = requests.get(
"https://api.medifontis.com/v1/drugs/suggestions",
params={"country": "au", "q": "para", "limit": "8"},
headers={"Authorization": f"Bearer {os.environ['MEDIFONTIS_API_KEY']}"},
timeout=10,
)
response.raise_for_status()
suggestions = response.json()["suggestions"]Response
{
"country": "au",
"suggestions": [
"Paraffin",
"Paralgin",
"Paracetamol",
"Paraffin Hard",
"Parapane OSTEO"
]
}Ranking
Exact names sort first, then names that start with the query, then other matches, shorter names first. Suggestions come from every source, including ingredient and classification names.
Build a responsive autocomplete
- Wait until the user has typed at least 3 characters.
- Debounce keystrokes by 150 to 250 milliseconds.
- Ignore responses for a query the user has already changed.
- Call your own backend, which adds the key, instead of Medifontis directly.
let latest = 0
let timer
input.addEventListener('input', () => {
clearTimeout(timer)
const q = input.value.trim()
if (q.length < 3) return
timer = setTimeout(async () => {
const request = ++latest
const response = await fetch(`/api/medicine-suggestions?q=${encodeURIComponent(q)}`)
const { suggestions } = await response.json()
if (request === latest) render(suggestions)
}, 200)
})