PHPackages                             lifo/typeahead-bundle - 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. lifo/typeahead-bundle

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

lifo/typeahead-bundle
=====================

A Symfony bundle that provides an autocomplete Typeahead form type compatible with Bootstrap v2|v3

2.4.2(7y ago)22118.8k↓46.2%13[3 PRs](https://github.com/lifo101/typeahead-bundle/pulls)MITPHP

Since Apr 9Pushed 5y ago3 watchersCompare

[ Source](https://github.com/lifo101/typeahead-bundle)[ Packagist](https://packagist.org/packages/lifo/typeahead-bundle)[ RSS](/packages/lifo-typeahead-bundle/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)DependenciesVersions (12)Used By (0)

Introduction
------------

[](#introduction)

This is a [Symfony v2.2+](http://symfony.com/) Bundle that provides a [Bootstrap](http://twitter.github.com/bootstrap/) **(v2.x or v3.x)**[Typeahead](http://twitter.github.com/bootstrap/javascript.html#typeahead) widget for use in forms. The Typeahead component used in this bundle is the original Bootstrap v2.3 Typeahead library with a few enhancements.

**Update: If you were pointing to `dev-master` in your composer.json and this bundle stopped working change your version to "^1.\*" and run `composer update lifo/typeahead` to update your project.**

- If you are using **Bootstrap v2.x** then you must use version **[1.\*](https://github.com/lifo101/typeahead-bundle/tree/1.1)**of this bundle.
- If you are using **Bootstrap v3.x** then you must use version **[2.\*](https://github.com/lifo101/typeahead-bundle/tree/2.0)**of this bundle.

*Note: This bundle does not use the newer [Twitter/Typeahead.js](https://twitter.github.io/typeahead.js/) javascript library.*

### Enhanced Typeahead Features

[](#enhanced-typeahead-features)

This bundle adds a few enhancements to the original bootstrap typeahead javascript library:

- Supports JSON objects
- Caches results
- Delays AJAX request to reduce server requests
- Properly handles pasting via mouse
- Includes an `AJAX Loader` icon
- Supports Non-Entity lookup
- Supports non AJAX loading via a custom callback function

### Screenshots

[](#screenshots)

This example shows a form field that allows a single name to be entered.

[![Typeahead (single) Example](Resources/doc/img/typeahead-single.png)](Resources/doc/img/typeahead-single.png)

This example shows a form field that allows multiple names to be entered. Clicking on a name link removes the entity. The entity in the backend is actually an ArrayCollection and automatically allows adding/removing entities from the list.

[![Typeahead (multiple) Example](Resources/doc/img/typeahead-multiple.png)](Resources/doc/img/typeahead-multiple.png)

How to install
--------------

[](#how-to-install)

**Note:** *This bundle requires jQuery and Bootstrap to be installed in your environment but does not include them directly.* I suggest using the [mopa/bootstrap-bundle](https://github.com/braincrafted/bootstrap-bundle)which can help with this for you.

- Add `lifo/typeahead-bundle` to the "requires" section of your project's `composer.json` file, which can be done automatically by running the composer command from within your project directory:

    ```
    composer require lifo/typeahead-bundle

    ```

    or manually by editing the composer.json file:

    ```
    {
        // ...
        "require": {
            // ...
            "lifo/typeahead-bundle": "^2.0"
        }
    }
    ```
- Run `composer update` in your project root.
- Update your project `app/AppKernel.php` file and add this bundle to the $bundles array:

    ```
    $bundles = array(
        // ...
        new Lifo\TypeaheadBundle\LifoTypeaheadBundle(),
    );
    ```
- Add `@lifo_typeahead_js` to your Assetic `javascripts` block. Similar to the block below. Your actual setup may differ. Be sure to include it AFTER your jquery and bootstrap libraries.

    ```
    {% javascripts filter='?yui_js' output='js/site.js'
        '@lifo_typeahead_js'
    %}

    {% endjavascripts %}
    ```
- Add `@lifo_typeahead_css` to your Assetic `stylesheets` block. Similar to the block below. Your actual setup may differ.

    ```
    {% stylesheets filter='cssrewrite,?yui_css' output='css/site.css'
        '@lifo_typeahead_css'
    -%}

    {% endstylesheets %}
    ```
- If you're not using `Assetic` then you will have to manually include the javascript and css files into your project.

    ```

    ```

How to use
----------

[](#how-to-use)

Using the typeahead control is extremely simple. The available options are outlined below:

```
$builder->add('user', 'entity_typeahead', array(
    'class'  => 'MyBundle:User',
    'render' => 'fullname',
    'route'  => 'user_list',
));
```

Options
-------

[](#options)

- `class` is your entity class. If `null` (or not specified), the items returned from your controller AJAX response do not have to be Entities. If not blank, the class is used to map the items to your DB Entities.
- `source` is the name of a function to call that will collect items to display. This or `route` must be specified. The prototype is: `function(query, process)` where `process` is the callback your function should call after you've fetched your list of matching items. It expects a **FLAT** array of strings to render into the pull down menu *(Not {id:'...', value:'...'} objects!)*. See the example below for more information.
- `route` is the name of the route to fetch entities from. The controller matching the route will receive the following parameters via `POST`:
    - `query` The query string to filter results by.
    - `limit` The maximum number of results to return.
    - `render` The configured `render` name. This is what you should use to set the `value` attribute in the AJAX response.
    - `property` The configured `property` name. Normally this is `id`. This is what you should use to set the `id` attribute in the AJAX response.
- `route_params` Extra parameters to pass to the `route`.
- `minLength` Minimum characters needed before firing AJAX request.
- `items` Maximum items to display at once *(default: 8)*
- `delay` Delay in milliseconds before firing AJAX *(default: 250)*
- `spinner` Class string to use for loading spinner *(default: "glyphicon glyphicon-refresh spin")***Font-Awesome** example: *"fa fa-refresh fa-spin fa-fw"*
- `multiple` If true the widget will allow multiple entities to be selected. One at a time. This special mode creates an unordered list below the typeahead widget to display the selected entities.
- `callback` Callback function (or string) that is called when an item is selected. Prototype: `function(text, data)`where `text` is the label of the selected item and `data` is the JSON object returned by the server.
- `render` is the property of your entity to display in the typeahead input. This is used to render the initial value(s) into the widget. Once a user starts typing, the rendered responses are dependent on the `route` or `source` used.

### AJAX Response

[](#ajax-response)

The controller should return a `JSON` array in the following format. Note: `id` and `value` properties are required but you may include other properties as well.

```
[
  { id: 1, value: 'Displayed Text 1' },
  { id: 2, value: 'Displayed Text 2' }
]
```

Note: If you are using a null `class` option then your JavaScript array should return an `id` and `value` that are the same thing. e.g:

```
[
  { id: 'Result 1', value: 'Result 1' },
  { id: 'Result 2', value: 'Result 2' }
]
```

If you do not return the same string for the `id` and `value` you will get confusing results in your UI.

### Custom Source Callback

[](#custom-source-callback)

Here is an example of a custom `source` callback. This example mimics the same result if you had used the `route` option.

```
function get_users(query, process) {
    $.post('/mysite/lookup/users', {query: query}, 'json')
        .success(function (data) {
            // must convert the data array into a flat list of strings.
            // If your lookup function already returns a flat list, then $.map() is not needed.
            process($.map(data, function(a){
                return a.value;
            }));
        });
}
```

```
$builder->add('user', 'entity_typeahead', array(
    'class'  => 'MyBundle:User',
    'render' => 'fullname',
    'source' => 'get_users', // a function name in the global javascript "window" object
));
```

### Template

[](#template)

Your form template might look something like this *(The screenshots above used this template bit)*. **Note:** The `widget_addon` attribute is a `mopa/bootstrap-bundle` attribute.

```
{{ form_row(form.name) }}
{{ form_row(form.owner, { attr: { placeholder: 'Search for user ...'}, widget_addon: {type: 'append', 'icon': 'user'}}) }}
{{ form_row(form.users, { attr: { placeholder: 'Add another user ...'}, widget_addon: {type: 'append', 'icon': 'user'}}) }}
```

Notes
-----

[](#notes)

This bundle renders its form elements in standard Symfony style. You will have to override the form blocks to get the proper Bootstrap styles applied. I strongly suggest something like [mopa/bootstrap-bundle](https://github.com/phiamo/MopaBootstrapBundle) that will override the Symfony form templates with proper Bootstrap versions automatically for you.

###  Health Score

41

—

FairBetter than 89% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity41

Moderate usage in the ecosystem

Community16

Small or concentrated contributor base

Maturity70

Established project with proven stability

 Bus Factor1

Top contributor holds 95.3% of commits — single point of failure

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

Every ~207 days

Recently: every ~220 days

Total

11

Last Release

2713d ago

Major Versions

1.1 → 2.02015-09-21

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/367337?v=4)[Jason M](/maintainers/lifo101)[@lifo101](https://github.com/lifo101)

---

Top Contributors

[![lifo101](https://avatars.githubusercontent.com/u/367337?v=4)](https://github.com/lifo101 "lifo101 (41 commits)")[![mikeyudin](https://avatars.githubusercontent.com/u/981848?v=4)](https://github.com/mikeyudin "mikeyudin (1 commits)")[![t-veron](https://avatars.githubusercontent.com/u/19189678?v=4)](https://github.com/t-veron "t-veron (1 commits)")

---

Tags

symfonyautocompletebootstraptypeahead

### Embed Badge

![Health badge](/badges/lifo-typeahead-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/lifo-typeahead-bundle/health.svg)](https://phpackages.com/packages/lifo-typeahead-bundle)
```

###  Alternatives

[twitter/typeahead.js

fast and fully-featured autocomplete library

16.5k209.7k4](/packages/twitter-typeaheadjs)[corejavascript/typeahead.js

fast and fully-featured autocomplete library

975103.8k2](/packages/corejavascript-typeaheadjs)[tetranz/select2entity-bundle

A Symfony bundle that integrates Select2 as a drop-in replacement for a standard entity field on a Symfony form.

2172.9M15](/packages/tetranz-select2entity-bundle)[thomas-schulz/symfony-meta

PhpStorm meta data for expected arguments completion in symfony projects.

8957.0k](/packages/thomas-schulz-symfony-meta)

PHPackages © 2026

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