jQuery Autocomplete: Ajax Autosuggest for Text Inputs

What devbridge-autocomplete does that a plain input cannot

A text input gives the user no feedback about what the server can actually match. The plugin closes that gap: as characters are typed, it either filters a local array or issues an Ajax request, then renders a positioned dropdown of matches under or above the field. The README describes the package as adding "autocomplete / autosuggest dropdowns to text input fields", and that is the whole scope. It is not a form library, not a validation layer, and not a UI kit. It attaches to existing markup through a jQuery plugin call, which is why it fits codebases that already depend on jQuery and would rather not introduce a second rendering model for one widget. The audience is narrow and clear: teams maintaining jQuery-based front ends, admin panels, internal tools, and legacy pages where the input already exists and only the suggestion behaviour is missing. If the rest of your application is React, Vue or Svelte, the plugin is the wrong shape, because its dropdown is created and mutated directly in the DOM rather than being owned by a component tree.

How the lookup pipeline works: local arrays, Ajax, and the cache

There are two data paths and they share the same rendering code. In the local path you pass lookup as an array of strings or { value, data } objects, or as a callback function (query, done); matching defaults to a case-insensitive substring test that you can replace with lookupFilter, and lookupLimit caps how many local matches are shown. In the Ajax path serviceUrl is required and may be a string or a function (query) that returns a URL string. The query travels in a parameter named by paramName, which defaults to query, the method defaults to GET, and dataType defaults to text, meaning the plugin expects to parse the response itself unless you say json or jsonp. transformResult is the normalization hook: its documented default is JSON.parse on a string response, and it must return an object shaped as { suggestions: [...] }. Each suggestion is { value: string, data: any }, and the data field is passed through untouched to formatResult, onSelect and the grouping key resolver. Two behaviours sit in front of the network and deserve attention. deferRequestBy waits a number of milliseconds before firing, which is how the plugin avoids one request per keystroke. Caching is on unless noCache is true, and preventBadQueries defaults to true, which suppresses future requests for any query beginning with a prefix that previously returned nothing. That second default is a real design decision: it saves requests on a large query space, and it also means a server that returns an empty result for a transient reason can lock out a whole branch of input until the cache is cleared. clearCache() and clear() exist for exactly that situation.

Installing devbridge-autocomplete and getting a first dropdown on screen

The package is published to npm under the name devbridge-autocomplete, which differs from the repository name, so the install line is worth reading twice. The README gives this command.

npm install devbridge-autocomplete

jQuery is a peer dependency, not a bundled one, and the README states the only runtime dependency is jQuery 3.0 or newer. TypeScript types ship with the package, so the import resolves types without a separate @types entry. The package exposes both a UMD bundle at dist/jquery.autocomplete.js and an ESM build at dist/jquery.autocomplete.esm.js, selected through the exports field in package.json.

The README shows the plugin being attached to a selector with an options object, and the option table lists lookup as the local-only setting that takes either an array of suggestions or a callback.

$(selector).autocomplete(options);

With lookup set to an array of strings, typing a character should open a dropdown listing the matching entries, and choosing one fills the input and fires onSelect. minChars defaults to 1, so suggestions are fetched after the first character.

Moving to Ajax replaces lookup with serviceUrl, which the table marks as required for Ajax and which accepts a URL string or a function (query) returning a URL string.

$('#autocomplete').autocomplete('setOptions', options);

That form is the documented way to update options on a live instance. The response the server returns must be something transformResult can turn into { suggestions: [...] }; if it returns a bare JSON array, the dropdown stays empty and no error is thrown, because the default transformResult only parses the body. Supplying your own transformResult is the documented fix. onSearchError is the callback that reports transport failures; the README does not describe any automatic retry, so a failed request is simply a failed request.

preventBadQueries and the caching defaults are the sharp edges

The option table lists preventBadQueries with a default of true and an example that makes the consequence concrete: once Jam returns nothing, Jamai will not fire a request. On a dataset with stable contents this is a sensible optimisation. On a dataset that changes while the user types, or where an empty response can come from a timeout, a rate limit or a cold cache, it converts one bad answer into a persistent one. The plugin caches results unless noCache is set, and the documented way out is clearCache() or clear(), which clears the suggestion cache and the current suggestions. There is no documented expiry, so a long-lived page keeps whatever it learned until you clear it or the page reloads.

The second sharp edge is positioning. appendTo defaults to document.body, and forceFixPosition is documented as only relevant when the dropdown is appended somewhere else, because automatic positioning runs only for the body case. If you append the dropdown into a scrolling container, you are taking on the positioning work yourself, and the target element needs position: absolute or position: relative. The third is query parsing: delimiter accepts a string or RegExp and splits the input value so the last segment becomes the query, which is what makes comma-separated value lists workable. If your input contains commas for another reason, the default behaviour of sending everything after the last comma to the server will surprise you. None of these are bugs; they are defaults chosen for the common case, and each has a documented override.

Upgrading from 1.x, and the jQuery 3 floor

Version 2.0 changed the peer dependency to jquery >=3.0 and the build target to evergreen browsers at ES2020, while leaving the plugin API and option names unchanged. The README says every existing call site continues to work, so the migration is a dependency question rather than a rewrite. The stated fallback is explicit: if you cannot upgrade jQuery, stay on the 1.5.x release line. That is the honest boundary of this release. A page still running jQuery 1.x behind an old template system cannot take 2.0.6 without first moving jQuery, and moving jQuery is usually a larger project than adding autocomplete. The repository's package.json sets engines.node to >=20 for the development toolchain, which affects contributors running the build and test scripts, not the browser bundle that consumers load. Recent releases are close together: v2.0.5 on 2026-09-11 and v2.0.6 on 2026-09-12, with v2.0.4 before them on 2026-06-25. The last push to the repository was on 2026-09-21. The project is not archived and its releases are current, but the README does not document a deprecation policy or a support window for the 1.5.x line, so anyone staying behind should treat that branch as frozen rather than maintained.

Where it fits against a typeahead-style alternative

The closest alternative in practice is a standalone typeahead library that does not depend on jQuery and owns its own rendering. The difference is architectural rather than cosmetic. This plugin delegates DOM creation to itself but expects the page to supply the input and, for Ajax, the response contract through transformResult; a framework-oriented typeahead typically expects you to render the suggestion list yourself and hands you the query as a callback. That inversion matters when you need custom markup per row, because here you work through formatResult and formatGroup returning HTML strings, while a render-callback design lets you return elements or component output. The trade runs the other way too: because this plugin owns the dropdown, positioning, keyboard navigation, grouping, the no-results notice and the cache all arrive without you writing them, and the option table is the entire configuration surface. For a jQuery page, that is less code than assembling the same behaviour from a render-callback library. For a page with no jQuery, the peer dependency is the deciding factor, and the README offers no jQuery-free build. The UMD bundle is described as roughly 13 KB minified, which is a reasonable size for what it contains but is not free if the page already loads a heavier component library that ships its own combobox.

Licence and the maintenance cost you are accepting

The package is MIT licensed, and the LICENSE file sits at the repository root. MIT imposes no obligation on how you distribute the resulting application and no copyleft requirement on surrounding code. The practical implication for a review like this is that the licence is not a reason to hesitate; the dependency is. jQuery itself is a peer dependency with the range jquery >=3.0, so the plugin inherits jQuery's own version and security posture rather than pinning it. Upgrading this plugin therefore means upgrading jQuery, and upgrading jQuery means auditing whatever else in the page depends on jQuery internals. That is the real maintenance cost, and it is larger than the plugin's own release cadence suggests. The repository ships a TypeScript configuration and bundled declaration file at dist/index.d.ts, so typed consumers get signatures without extra work, but the README does not describe a migration guide for future major versions beyond the 1.x to 2.0 note. This is not legal advice; if licence compatibility matters to your organisation, have counsel review the MIT text against your distribution model.

Editorial conclusion

Adopt it if you already ship jQuery 3 or newer and want a dropdown on a text input without adding a framework: npm install devbridge-autocomplete, point serviceUrl at an endpoint, and the plugin handles debouncing, caching, grouping and keyboard selection. Do not adopt it if you are on jQuery 1.x or 2.x, because 2.0 drops those peer versions and the only documented path is staying on the 1.5.x line; do not adopt it either if you want a component that renders its own markup, since this plugin only supplies the dropdown. Before wiring it in, verify that your jQuery version satisfies the jquery >=3.0 peer dependency, that your response shape matches what transformResult expects, and whether preventBadQueries is acceptable for your query space, since once a prefix returns no results the plugin stops requesting longer queries that start with it.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. README
4. Releases
5. tkirda/jQuery-Autocomplete on GitHub