Ajax Autocomplete for jQuery

01

Ajax lookup, with ghost completion

Send the typed query to a server endpoint and render the suggestions it returns. The grey ghost letters drifting behind your typing are the onHint callback — a best-match preview of what pressing Tab would select.

Try — start typing a country

No selection yet.

$('#country').devbridgeAutocomplete({
    serviceUrl: '/api/countries',
    onSelect: function (suggestion) {
        // suggestion.value, suggestion.data
    },
    onHint: function (hint) {
        // fill the ghost field behind the input
        $('#country-ghost').val(hint);
    },
});

Built in: query debounce, response caching, and bad-query suppression keep the network quiet.

02

Local data with grouping

Pass an array of suggestions directly — no server needed. Use groupBy to render category headers. As of 2.0.2 the renderer stably groups by the chosen field, so interleaved categories collapse to one header each.

Try — type an NHL or NBA team

No selection yet.

$('#team').devbridgeAutocomplete({
    lookup: teams,   // [{value, data: {category: 'NHL'}}, …]
    groupBy: 'category',
    showNoSuggestionNotice: true,
    noSuggestionNotice: 'Sorry, no matching results',
});

Matched substring is wrapped in <strong> automatically; override with formatResult for custom markup.

03

Custom suggestion container

By default the suggestions float in a fixed-positioned panel attached to <body>. Pass appendTo to render them inline next to (or anywhere relative to) the input — useful when they need to live inside a layout rather than above it.

Try — type a country

Suggestions render here →

$('#country-inline').devbridgeAutocomplete({
    lookup: countries,
    appendTo: '#suggestions-container',
});

Accepts a selector string, a DOM Element, or a jQuery object.

04

Dynamic width

The suggestion panel matches the input's outer width by default (width: 'auto'). Resize the window and the dropdown follows the input. width: 'flex' sizes the panel to its content; a number locks an explicit width in pixels.

Try — the input fills its column

$('#country-flex').devbridgeAutocomplete({
    lookup: countries,
    // 'auto' (default) tracks the input's outerWidth
    // 'flex' sizes the panel to its widest suggestion
    // a Number locks an explicit pixel width
});