PHPackages                             gaomingcode/jquery.autocomplete - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. gaomingcode/jquery.autocomplete

ActiveLibrary

gaomingcode/jquery.autocomplete
===============================

Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields.

1.4.11(4y ago)018MITJavaScript

Since Jun 3Pushed 4y agoCompare

[ Source](https://github.com/gaomingcode/jquery-autocomplete)[ Packagist](https://packagist.org/packages/gaomingcode/jquery.autocomplete)[ Docs](https://www.devbridge.com/sourcery/components/jquery-autocomplete/)[ RSS](/packages/gaomingcode-jqueryautocomplete/feed)WikiDiscussions master Synced 6d ago

READMEChangelog (1)DependenciesVersions (2)Used By (0)

Ajax Autocomplete for jQuery
============================

[](#ajax-autocomplete-for-jquery)

[![GitHub Version](https://camo.githubusercontent.com/1dbd023be2b3bc341b7b18a5723cb60cf424788fcd4a39f1cc253a6a38af2a79/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f67616f6d696e67636f64652f6a71756572792d6175746f636f6d706c6574652e737667)](https://github.com/gaomingcode/jquery-autocomplete)[![Packagist Downloads](https://camo.githubusercontent.com/5e942b74e0de9a98a35b97dec0cef9a17a0cfee5fe93d0782cd663b9ca8c48df/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646d2f67616f6d696e67636f64652f6a71756572792e6175746f636f6d706c657465)](https://github.com/gaomingcode/jquery-autocomplete)[![Github License](https://camo.githubusercontent.com/21855d8c941159a9b80e5ed75493e593473772015391e2de5bb1e3c2e960f023/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f67616f6d696e67636f64652f6a71756572792d6175746f636f6d706c657465)](https://github.com/gaomingcode/jquery-autocomplete)

Installation
------------

[](#installation)

### Composer

[](#composer)

```
composer require gaomingcode/jquery.jquery.autocomplete

```

ReadMe from Origin
------------------

[](#readme-from-origin)

Devbridge Group accelerates software to market for enterprise clients through dedicated product teams, user experience and software engineering expertise.

[www.devbridge.com](http://www.devbridge.com/)

Ajax Autocomplete for jQuery
============================

[](#ajax-autocomplete-for-jquery-1)

Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields.

It has no dependencies other than jQuery.

The standard jquery.autocomplete.js file is around 13KB when minified.

API
---

[](#api)

The following sets up autocomplete for input fields where `options` is an object literal that defines the settings to use for the autocomplete plugin. All available option settings are shown in the tables below.

```
$(selector).autocomplete(options);
```

### General settings (local and Ajax)

[](#general-settings-local-and-ajax)

SettingDefaultDescription`noCache``false`Boolean value indicating whether to cache suggestion results`delimiter`optionalString or RegExp, that splits input value and takes last part to as query for suggestions. Useful when for example you need to fill list of comma separated values.`minChars``1`Minimum number of characters required to trigger autosuggest`triggerSelectOnValidInput``true`Boolean value indicating if `select` should be triggered if it matches suggestion`preventBadQueries``true`Boolean value indicating if it should prevent future Ajax requests for queries with the same root if no results were returned. E.g. if `Jam` returns no suggestions, it will not fire for any future query that starts with `Jam``autoSelectFirst``false`If set to `true`, first item will be selected when showing suggestions`beforeRender`optional`function (container, suggestions) {}` called before displaying the suggestions. You may manipulate suggestions DOM before it is displayed`formatResult`optional`function (suggestion, currentValue) {}` custom function to format suggestion entry inside suggestions container`formatGroup`optional`function (suggestion, category) {}` custom function to format group header`groupBy`optionalproperty name of the suggestion `data` object, by which results should be grouped`maxHeight``300`Maximum height of the suggestions container in pixels`width``auto`Suggestions container width in pixels, e.g.: 300, `flex` for max suggestion size and `auto` takes input field width`zIndex``9999`'z-index' for suggestions container`appendTo`optionalContainer where suggestions will be appended. Default value `document.body`. Can be jQuery object, selector or HTML element. Make sure to set `position: absolute` or `position: relative` for that element`forceFixPosition``false`Suggestions are automatically positioned when their container is appended to body (look at `appendTo` option), in other cases suggestions are rendered but no positioning is applied. Set this option to force auto positioning in other cases`orientation``bottom`Vertical orientation of the displayed suggestions, available values are `auto`, `top`, `bottom`. If set to `auto`, the suggestions will be orientated it the way that place them closer to middle of the view port`preserveInput``false`If `true`, input value stays the same when navigating over suggestions`showNoSuggestionNotice``false`When no matching results, display a notification label`noSuggestionNotice``No results`Text or htmlString or Element or jQuery object for no matching results label`onInvalidateSelection`optional`function () {}` called when input is altered after selection has been made. `this` is bound to input element`tabDisabled``false`Set to true to leave the cursor in the input field after the user tabs to select a suggestion### Event function settings (local and Ajax)

[](#event-function-settings-local-and-ajax)

Event settingFunction description`onSearchStart``function (params) {}` called before Ajax request. `this` is bound to input element`onHint``function (hint) {}` used to change input value to first suggestion automatically. `this` is bound to input element`onSearchComplete``function (query, suggestions) {}` called after Ajax response is processed. `this` is bound to input element. `suggestions` is an array containing the results`transformResult``function(response, originalQuery) {}` called after the result of the query is ready. Converts the result into response.suggestions format`onSelect``function (suggestion) {}` Callback function invoked when user selects suggestion from the list. `this` inside callback refers to input HtmlElement.`onSearchError``function (query, jqXHR, textStatus, errorThrown) {}` called if Ajax request fails. `this` is bound to input element`onHide``function (container) {}` called before container will be hidden### Local only settings

[](#local-only-settings)

SettingDefaultDescription`lookupLimit``no limit`Number of maximum results to display for local lookup`lookup`n/aCallback function or lookup array for the suggestions. It may be array of strings or `suggestion` object literals`suggestion`n/aNot a settings, but in the context of above row, a suggestion is an object literal with the following format: `{ value: 'string', data: any }``lookupFilter`n/a`function (suggestion, query, queryLowerCase) {}` filter function for local lookups. By default it does partial string match (case insensitive)### Ajax only settings

[](#ajax-only-settings)

SettingDefaultDescription`serviceUrl`n/aServer side URL or callback function that returns serviceUrl string`type``GET`Ajax request type to get suggestions`dataType``text`type of data returned from server. Either `text`, `json` or `jsonp`, which will cause the autocomplete to use jsonp. You may return a json object in your callback when using jsonp`paramName``query`The name of the request parameter that contains the query`params`optionalAdditional parameters to pass with the request`deferRequestBy``0`Number of miliseconds to defer Ajax request`ajaxSettings`optionalAny additional [Ajax Settings](http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings) that configure the jQuery Ajax requestDefault Options
---------------

[](#default-options)

Default options for all instances can be accessed via `$.Autocomplete.defaults`.

Instance Methods
----------------

[](#instance-methods)

Autocomplete instance has following methods:

- `setOptions(options)`: you may update any option at any time. Options are listed above.
- `clear`: clears suggestion cache and current suggestions.
- `clearCache`: clears suggestion cache.
- `disable`: deactivate autocomplete.
- `enable`: activates autocomplete if it was deactivated before.
- `hide`: hides suggestions.
- `dispose`: destroys autocomplete instance. All events are detached and suggestion containers removed.

There are two ways that you can invoke Autocomplete method. One is calling autocomplete on jQuery object and passing method name as string literal. If method has arguments, arguments are passed as consecutive parameters:

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

Or you can get Autocomplete instance by calling autcomplete on jQuery object without any parameters and then invoke desired method.

```
$('#autocomplete').autocomplete().disable();
$('#autocomplete').autocomplete().setOptions(options);
```

Usage
-----

[](#usage)

Html:

```

```

Ajax lookup:

```
$('#autocomplete').autocomplete({
    serviceUrl: '/autocomplete/countries',
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});
```

Local lookup (no Ajax):

```
var countries = [
    { value: 'Andorra', data: 'AD' },
    // ...
    { value: 'Zimbabwe', data: 'ZZ' }
];

$('#autocomplete').autocomplete({
    lookup: countries,
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});
```

Custom lookup function:

```
$('#autocomplete').autocomplete({
    lookup: function (query, done) {
        // Do Ajax call or lookup locally, when done,
        // call the callback and pass your results:
        var result = {
            suggestions: [
                { "value": "United Arab Emirates", "data": "AE" },
                { "value": "United Kingdom",       "data": "UK" },
                { "value": "United States",        "data": "US" }
            ]
        };

        done(result);
    },
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});
```

Styling
-------

[](#styling)

Generated HTML markup for suggestions is displayed below. You may style it any way you'd like.

```

    NHL
    ...
    ...
    ...

```

Style sample:

```
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
```

Response Format
---------------

[](#response-format)

Response from the server must be JSON formatted following JavaScript object:

```
{
    // Query is not required as of version 1.2.5
    "query": "Unit",
    "suggestions": [
        { "value": "United Arab Emirates", "data": "AE" },
        { "value": "United Kingdom",       "data": "UK" },
        { "value": "United States",        "data": "US" }
    ]
}
```

Data can be any value or object. Data object is passed to formatResults function and onSelect callback. Alternatively, if there is no data you can supply just a string array for suggestions:

```
{
    "query": "Unit",
    "suggestions": ["United Arab Emirates", "United Kingdom", "United States"]
}
```

Non standard query/results
--------------------------

[](#non-standard-queryresults)

If your Ajax service expects the query in a different format, and returns data in a different format than the standard response, you can supply the "paramName" and "transformResult" options:

```
$('#autocomplete').autocomplete({
    paramName: 'searchString',
    transformResult: function(response) {
        return {
            suggestions: $.map(response.myData, function(dataItem) {
                return { value: dataItem.valueField, data: dataItem.dataField };
            })
        };
    }
})
```

Grouping Results
----------------

[](#grouping-results)

Specify `groupBy` option of you data property if you wish results to be displayed in groups. For example, set `groupBy: 'category'` if your suggestion data format is:

```
[
    { value: 'Chicago Blackhawks', data: { category: 'NHL' } },
    { value: 'Chicago Bulls', data: { category: 'NBA' } }
]
```

Results will be formatted into two groups **NHL** and **NBA**.

Known Issues
------------

[](#known-issues)

If you use it with jQuery UI library it also has plugin named `autocomplete`. In this case you can use plugin alias `devbridgeAutocomplete`:

```
$('.autocomplete').devbridgeAutocomplete({ ... });
```

It seems that for mobile Safari click events are only triggered if the CSS of the object being tapped has the cursor set to pointer:

```
.autocomplete-suggestion {
    cursor: pointer;
}

```

See issue #542

License
-------

[](#license)

Ajax Autocomplete for jQuery is freely distributable under the terms of an MIT-style [license](https://github.com/devbridge/jQuery-Autocomplete/blob/master/dist/license.txt).

Copyright notice and permission notice shall be included in all copies or substantial portions of the Software.

Authors
-------

[](#authors)

Tomas Kirda / [@tkirda](https://twitter.com/tkirda)

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity6

Limited adoption so far

Community19

Small or concentrated contributor base

Maturity51

Maturing project, gaining track record

 Bus Factor7

7 contributors hold 50%+ of commits

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1810d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/4b333bd44a2f7f526cc29a59b2945b27c7d2f31df68b92c2eb46efbddc032483?d=identicon)[gaomingcode](/maintainers/gaomingcode)

---

Top Contributors

[![stonio](https://avatars.githubusercontent.com/u/19952825?v=4)](https://github.com/stonio "stonio (10 commits)")[![swey](https://avatars.githubusercontent.com/u/568574?v=4)](https://github.com/swey "swey (6 commits)")[![gaomingcode](https://avatars.githubusercontent.com/u/53959161?v=4)](https://github.com/gaomingcode "gaomingcode (5 commits)")[![geoffrosen](https://avatars.githubusercontent.com/u/11847434?v=4)](https://github.com/geoffrosen "geoffrosen (4 commits)")[![glowka](https://avatars.githubusercontent.com/u/5549304?v=4)](https://github.com/glowka "glowka (3 commits)")[![Gouigouix](https://avatars.githubusercontent.com/u/2912507?v=4)](https://github.com/Gouigouix "Gouigouix (3 commits)")[![silvenon](https://avatars.githubusercontent.com/u/471278?v=4)](https://github.com/silvenon "silvenon (2 commits)")[![SunboX](https://avatars.githubusercontent.com/u/83344?v=4)](https://github.com/SunboX "SunboX (2 commits)")[![tkirda](https://avatars.githubusercontent.com/u/282935?v=4)](https://github.com/tkirda "tkirda (2 commits)")[![jesseditson](https://avatars.githubusercontent.com/u/370239?v=4)](https://github.com/jesseditson "jesseditson (2 commits)")[![gedbac](https://avatars.githubusercontent.com/u/673638?v=4)](https://github.com/gedbac "gedbac (2 commits)")[![macool](https://avatars.githubusercontent.com/u/1407000?v=4)](https://github.com/macool "macool (2 commits)")[![MrSam](https://avatars.githubusercontent.com/u/861459?v=4)](https://github.com/MrSam "MrSam (2 commits)")[![nilsga](https://avatars.githubusercontent.com/u/42919?v=4)](https://github.com/nilsga "nilsga (2 commits)")[![oshihirii](https://avatars.githubusercontent.com/u/5090307?v=4)](https://github.com/oshihirii "oshihirii (2 commits)")[![Rickycezar](https://avatars.githubusercontent.com/u/7500485?v=4)](https://github.com/Rickycezar "Rickycezar (2 commits)")[![ErikSchierboom](https://avatars.githubusercontent.com/u/135246?v=4)](https://github.com/ErikSchierboom "ErikSchierboom (2 commits)")[![jrochkind](https://avatars.githubusercontent.com/u/149304?v=4)](https://github.com/jrochkind "jrochkind (1 commits)")[![armno](https://avatars.githubusercontent.com/u/911894?v=4)](https://github.com/armno "armno (1 commits)")[![balvig](https://avatars.githubusercontent.com/u/104138?v=4)](https://github.com/balvig "balvig (1 commits)")

---

Tags

autocompletejquery

### Embed Badge

![Health badge](/badges/gaomingcode-jqueryautocomplete/health.svg)

```
[![Health](https://phpackages.com/badges/gaomingcode-jqueryautocomplete/health.svg)](https://phpackages.com/packages/gaomingcode-jqueryautocomplete)
```

###  Alternatives

[barryvdh/laravel-ide-helper

Laravel IDE Helper, generates correct PHPDocs for all Facade classes, to improve auto-completion.

14.9k123.0M687](/packages/barryvdh-laravel-ide-helper)[yajra/laravel-datatables-oracle

jQuery DataTables API for Laravel

4.9k33.8M339](/packages/yajra-laravel-datatables-oracle)[jetbrains/phpstorm-stubs

PHP runtime & extensions header files for PhpStorm

1.4k27.7M68](/packages/jetbrains-phpstorm-stubs)[keygenqt/yii2-autocomplete-ajax

A simple way to search model id of the attributes model

1015.8k](/packages/keygenqt-yii2-autocomplete-ajax)[hybridlogic/validation

A simple, extensible validation library for PHP with support for filtering and validating any input array along with generating client side validation code.

641.1k](/packages/hybridlogic-validation)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)