PHPackages                             bizley/ajaxdropdown - 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. bizley/ajaxdropdown

ActiveYii2-extension[Utility & Helpers](/categories/utility)

bizley/ajaxdropdown
===================

Bootstrap dropdown list with AJAX data.

1.3.3(6y ago)1524.8k↓50%6BSD-3-ClausePHPCI passing

Since Feb 10Pushed 5y ago5 watchersCompare

[ Source](https://github.com/bizley/Yii2-AjaxDropDown)[ Packagist](https://packagist.org/packages/bizley/ajaxdropdown)[ RSS](/packages/bizley-ajaxdropdown/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (8)Dependencies (2)Versions (9)Used By (0)

Yii2-AjaxDropDown
=================

[](#yii2-ajaxdropdown)

[![Latest Stable Version](https://camo.githubusercontent.com/76e17b6613ec834331c3aaa6e38cda465befb82e7fc26bfaa90323a794042f49/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f62697a6c65792f616a617864726f70646f776e2e737667)](https://camo.githubusercontent.com/76e17b6613ec834331c3aaa6e38cda465befb82e7fc26bfaa90323a794042f49/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f62697a6c65792f616a617864726f70646f776e2e737667)[![Total Downloads](https://camo.githubusercontent.com/1be4a296782cfffee24495ffdb3890c5b57fce9a215f60235fd29440571fe185/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f62697a6c65792f616a617864726f70646f776e2e737667)](https://camo.githubusercontent.com/1be4a296782cfffee24495ffdb3890c5b57fce9a215f60235fd29440571fe185/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f62697a6c65792f616a617864726f70646f776e2e737667)[![License](https://camo.githubusercontent.com/05cbaf0783a7efa5ec85e7de9581e3d8eb99258b6fcad7075f70b897e1d08679/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f62697a6c65792f616a617864726f70646f776e2e737667)](https://camo.githubusercontent.com/05cbaf0783a7efa5ec85e7de9581e3d8eb99258b6fcad7075f70b897e1d08679/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f62697a6c65792f616a617864726f70646f776e2e737667)

Yii 2.0 dropdown widget with AJAX data

AjaxDropDown allows to use dropdown menu to select one or more values in your form. Dropdown data is sent using the AJAX post method.

How it works
------------

[](#how-it-works)

The widget collects AJAX data and displays it as the list where every element can be clicked to select that value for the model attribute. The number of results per page is controlled by the source controller action. After first page the widget collects new page data only when the 'next' button is clicked and that target page has not been collected already. In any other case the data is present all the time and browsing through the already loaded pages takes no server time. The idea behind the input text field next to the dropdown button is to give the option to filter the source data before displaying it in the widget but there are no requirements for this so feel free to add any logic here you like.

Screenshots
-----------

[](#screenshots)

*Default view:*
[![Default view](docs/images/basic.jpg "Default view")](docs/images/basic.jpg)

*Dropdown list visible: (option 'dropup' is available as well)*
[![Dropdown list visible](docs/images/dropdown.jpg "Dropdown list visible")](docs/images/dropdown.jpg)

*Extra button:*
[![Extra button](docs/images/extra.jpg "Extra button")](docs/images/extra.jpg)

*Records selected:*
[![Records selected](docs/images/selected.jpg "Records selected")](docs/images/selected.jpg)

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

[](#how-to-install)

Update your composer.json with

```
{
  "require": {
    "bizley/ajaxdropdown": "*"
  }
}

```

and run composer update. After installation add the following inside your view (change to suit your needs):

```

```

This is just a basic widget configuration. You can find all the options described in the AjaxDropDown.php and docs files.

Full widget structure with possible options
-------------------------------------------

[](#full-widget-structure-with-possible-options)

```

            {{extraButtonLabel}}

                {buttonLabel}

                {removeSingleLabel}

                    {pagerBegin}
                        [CURRENT_PAGE_NUMBER]/[TOTAL_PAGES_NUMBER]
                    {pagerEnd}{local.allRecords|local.recordsContaining}

                {progressBar}
                {local.error}
                {local.noRecords}

                    {markBegin}[RECORD_VALUE]{markEnd}

                        {previousBegin}{local.previous}{previousEnd}

                        {nextBegin}{local.next}{nextEnd}

                {removeLabel}
            {additionalCode}{markBegin}[SELECTED_VALUE]{markEnd}

```

Names in curly brackets are options and can be set as widget parameters. Names in square brackets are automatically set widget data.

AJAX data source
----------------

[](#ajax-data-source)

Below is the structure required by this widget:

```
[
  'data' => [
    [
      'id' => RECORD_ID,
      'mark' => RECORD_EMPHASIS,
      'value' => RECORD_VALUE
    ],
    // ...
  ],
  'page' => CURRENT_PAGE_NUMBER,
  'total' => TOTAL_PAGES_NUMBER
]

```

Where:
RECORD\_ID is the record unique identificator,
RECORD\_EMPHASIS is the 0|1 flag wheter this record value should be surrounded with {markBegin} and {markEnd},
RECORD\_VALUE is the record actual value,
CURRENT\_PAGE\_NUMBER is the actual page number (starting from 1),
TOTAL\_PAGES\_NUMBER is the number of all available pages.

This should be JSON encoded. You can find the example in the docs files.

Preselected and post-validate data with PHP.
--------------------------------------------

[](#preselected-and-post-validate-data-with-php)

In case you want to display some records as already selected or simply just want to keep the selected data after validation you need to prepare the 'data' parameter which is the array almost identical to the source one.

```
[
  [
    'id' => RECORD_ID,
    'mark' => RECORD_EMPHASIS,
    'value' => RECORD_VALUE
  ],
  // ...
]

```

This time the array shouldn't be encoded. Keep this structure even in case of a single result.

You can find the controller's action example in docs files.

Preselected and post-validate data with JavaScript.
---------------------------------------------------

[](#preselected-and-post-validate-data-with-javascript)

You can manipulate selected results by triggering the following events on AjaxDropDown object:

**add**
Add one or more results. In case the *'singleMode'* is true only the last added result will be displayed.

```
jQuery({id or class of AjaxDropDown field}).trigger('add', [result1, result2, ...]);

```

With every result data being object with *id*, *value*, *mark* and *additional* properties (only *id* is required):

```
{id:1, value:"xxx", mark:0, additional:"xxx"}

```

**removeOne**
Remove one or more results.

```
jQuery({id or class of AjaxDropDown field}).trigger('removeOne', [id1, id2, ...]);

```

**removeAll**
Remove all results.

```
jQuery({id or class of AjaxDropDown field}).trigger('removeAll');

```

By default events (except 'removeAll') are calling callback methods *onRemove* and *onSelect*. You can change it by setting *'jsEventsCallback'* to false.

Available extra options
-----------------------

[](#available-extra-options)

**Drop up**
Set *'dropup' => true* to trigger dropdown menu above to button.

**Additional button**
Set *'extraButtonLabel'* and/or *'extraButtonOptions'* to add extra button between input text field and dropdown trigger button.

**Additional code**
Set *'additionalCode'* if you want to add an extra code between link removing the selected result and selected result label. You can use {ID} and {VALUE} tags to get these automatically replaced with selected data. You can replace this general option for only one row by setting *'additional'* array element in *'data'* parameter.

**Single mode**
Set *'singleMode'* to true if you want only one result to be selectable at once. This option renders selected result inside the filter field - if you want it to be displayed underneath the field set *'singleModeBottom'* to true.

**Callbacks**
Pass any JavaScript function as a string to *'onSelect'* and *'onRemove'* parameters to call them when selecting or removing the results from the list. In first case available variables are *id* (ID of the result), *label* (its label) and *selection* (list of all selected results). In second case only *id* and *selection* are available.

###  Health Score

38

—

LowBetter than 85% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity36

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity68

Established project with proven stability

 Bus Factor1

Top contributor holds 100% 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 ~262 days

Recently: every ~438 days

Total

8

Last Release

2275d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/b33b799410f9cb8d69a27bce7ae65d5c0a0aa8e097b2624c2f5315400d653b38?d=identicon)[bizley](/maintainers/bizley)

---

Top Contributors

[![dependabot-preview[bot]](https://avatars.githubusercontent.com/in/2141?v=4)](https://github.com/dependabot-preview[bot] "dependabot-preview[bot] (1 commits)")

---

Tags

ajaxdropdownhacktoberfestyii2yii2ajaxwidgetbootstrapdropdownajaxdropdown

### Embed Badge

![Health badge](/badges/bizley-ajaxdropdown/health.svg)

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

###  Alternatives

[nex/yii2-chosen

Bootstrap Chosen widget for Yii2

2796.6k](/packages/nex-yii2-chosen)

PHPackages © 2026

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