PHPackages                             kreemer/ux-autocomplete-js - 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. [Utility & Helpers](/categories/utility)
4. /
5. kreemer/ux-autocomplete-js

ActiveSymfony-bundle[Utility & Helpers](/categories/utility)

kreemer/ux-autocomplete-js
==========================

v1.0(4y ago)371MITPHPPHP >=7.4

Since Sep 29Pushed 4y agoCompare

[ Source](https://github.com/kreemer/ux-autocomplete-js)[ Packagist](https://packagist.org/packages/kreemer/ux-autocomplete-js)[ RSS](/packages/kreemer-ux-autocomplete-js/feed)WikiDiscussions main Synced 2d ago

READMEChangelog (1)Dependencies (12)Versions (2)Used By (0)

UX autoComplete.js
==================

[](#ux-autocompletejs)

[![demo](https://camo.githubusercontent.com/a9e2c41ed372a0d8619c419b92bd804a63a8a95755542b046bb25316323c0e10/68747470733a2f2f6c657468616e692e63682f77702d636f6e74656e742f75706c6f6164732f323032312f30392f657a6769662d322d3966633136353864393335642e676966)](https://camo.githubusercontent.com/a9e2c41ed372a0d8619c419b92bd804a63a8a95755542b046bb25316323c0e10/68747470733a2f2f6c657468616e692e63682f77702d636f6e74656e742f75706c6f6164732f323032312f30392f657a6769662d322d3966633136353864393335642e676966)

UX autoComplete.js is a Symfony bundle integrating the [autoComplete.js](https://tarekraafat.github.io/autoComplete.js/#/) library in Symfony applications. It is part of [the Symfony UX initiative](https://symfony.com/ux).

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

[](#installation)

UX autoComplete.js requires PHP 7.4+ and Symfony 4.4+.

Install this bundle using Composer and Symfony Flex:

```
composer require kreemer/ux-autocomplete-js

# Don't forget to install the JavaScript dependencies as well and compile
yarn install --force
yarn encore dev
```

Also make sure you have at least version 2.0 of [@symfony/stimulus-bridge](https://github.com/symfony/stimulus-bridge) in your `package.json` file.

Usage
-----

[](#usage)

To use this UX Package, inject the `AutoCompleteBuilderInterface` service and create an autoComplete model in PHP:

```
// ...
use Kreemer\UX\AutoCompleteJS\Builder\AutoCompleteBuilderInterface;

class IndexController extends AbstractController
{
    /**
     * @Route("/", name="homepage")
     */
    public function index(AutoCompleteBuilderInterface $autoCompleteBuilder): Response
    {
        $autoComplete = $autoCompleteBuilder->createAutocomplete();
        $autoComplete->getDataModel()->setSrc([ 'here', 'are', 'the', 'options']);

        return $this->render('index/index.html.twig', [
            'autoComplete' => $autoComplete,
        ]);
    }
}
```

All options and data are provided as-is to autoComplete.js. You can read [autoComplete.js documentation](https://tarekraafat.github.io/autoComplete.js/#/) to discover them all.

Once created in PHP, a autoComplete model can be displayed using Twig:

```
{{ render_autocomplete(autoComplete) }}

{# You can pass HTML attributes as a second argument to add them on the  tag #}
{{ render_autocomplete(autoComplete, {'class': 'my-class'}) }}
```

### Form type

[](#form-type)

The bundle provides a custom form type which can be used like an EntityType.

```
$form = $this->createFormBuilder($array)
    ->add('user', AutoCompleteType::class, [
        'class' => User::class,
        'choice_label' => 'name',
    ])
    ->add('save', SubmitType::class, ['label' => 'Submit'])
    ->getForm();
```

The form itself will be rendered automatically with an input box which the entity class can be selected.

### Extend the default behavior

[](#extend-the-default-behavior)

The controller allows you to extend its default behavior using a custom Stimulus controller:

```
// custom_controller.js

import { Controller } from 'stimulus';

export default class extends Controller {
    connect() {
        this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect);
        this.element.addEventListener('autocomplete:connect', this._onConnect);
        this.element.addEventListener('autocomplete:bound', this._onBound);
    }

    disconnect() {
        // You should always remove listeners when the controller is disconnected to avoid side effects
        this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect);
        this.element.removeEventListener('autocomplete:connect', this._onConnect);
        this.element.removeEventListener('autocomplete:bound', this._onBound);
    }

    _onPreConnect(event) {
        console.log(event.detail.config);
    }

    _onConnect(event) {
        console.log(event.detail.autoCompleteJS); // You can access the instance here
    }

    _onBound(event) {
        console.log(event.detail.dataTarget); // You can access data holder here
    }
}
```

Then in your render call, add your controller as an HTML attribute:

```
{{ render_autocomplete(autoComplete, {'data-controller': 'custom'}) }}
```

This is the preferred method to extend the default functionality. Note that with the preConnect event it is possible to attach handlers and callback functions.

Run tests
---------

[](#run-tests)

### PHP tests

[](#php-tests)

```
php vendor/bin/phpunit
```

### JavaScript tests

[](#javascript-tests)

```
cd Resources/assets
yarn test
```

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity12

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

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

1686d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/905dd52f3e3496d49f533a665ce4563dd944876be109503e36efd57bf9885c5b?d=identicon)[kreemer](/maintainers/kreemer)

---

Tags

symfony-ux

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan

Code StylePHP CS Fixer

Type Coverage Yes

### Embed Badge

![Health badge](/badges/kreemer-ux-autocomplete-js/health.svg)

```
[![Health](https://phpackages.com/badges/kreemer-ux-autocomplete-js/health.svg)](https://phpackages.com/packages/kreemer-ux-autocomplete-js)
```

###  Alternatives

[symfony/ux-chartjs

Chart.js integration for Symfony

1003.2M18](/packages/symfony-ux-chartjs)[symfony/ux-toggle-password

Toggle visibility of password inputs for Symfony Forms

26508.0k5](/packages/symfony-ux-toggle-password)[pugx/autocompleter-bundle

Add an autocomplete type to forms

93861.6k3](/packages/pugx-autocompleter-bundle)[symfony/ux-cropperjs

Cropper.js integration for Symfony

19280.3k3](/packages/symfony-ux-cropperjs)[netgen/layouts-core

Netgen Layouts enables you to build and manage complex web pages in a simpler way and with less coding. This is the core of Netgen Layouts, its heart and soul.

3689.4k10](/packages/netgen-layouts-core)[symfony/ux-dropzone

File input dropzones for Symfony Forms

541.5M4](/packages/symfony-ux-dropzone)

PHPackages © 2026

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