PHPackages                             level51/silverstripe-ajax-select-field - 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. level51/silverstripe-ajax-select-field

ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility)

level51/silverstripe-ajax-select-field
======================================

Ajax Select Field for Silverstripe using vue.js

0.5.1(2y ago)32.3k7[1 PRs](https://github.com/Level51/silverstripe-ajax-select-field/pulls)MITPHPPHP >=7.1

Since Feb 9Pushed 2y ago3 watchersCompare

[ Source](https://github.com/Level51/silverstripe-ajax-select-field)[ Packagist](https://packagist.org/packages/level51/silverstripe-ajax-select-field)[ RSS](/packages/level51-silverstripe-ajax-select-field/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (1)Versions (13)Used By (0)

SilverStripe Ajax Select Field
==============================

[](#silverstripe-ajax-select-field)

This module adds a `AjaxSelectField` and a `AjaxMultiSelectField` to select results returned from an ajax endpoint.

Result Fetching
---------------

[](#result-fetching)

Results can be fetched from a custom endpoint (using the `setEndpoint(ENDPOINT_URL)` method) or using a callback function passed in to the field using `setSearchCallback` (see example below).

The response has to be a JSON array with an object per result, where each result has to have at least an `id` and `title` field, so for example:

```
[
    {
        "id": 1,
        "title": "Home"
    },
    {
        "id": 2,
        "title": "Contact Us"
    }
]
```

Storage
-------

[](#storage)

### Single Select (AjaxSelectField)

[](#single-select-ajaxselectfield)

By default the whole result (with all it's properties) will be stored in the DB as JSON string, although there is also an "id only" mode.

So the DB value will look like `{ "id": "1", "title": "Home" }` with `idOnlyMode = false`. With the mode activated only the id will be stored (as with the default DropdownField).

### Multi Select (AjaxMultiSelectField)

[](#multi-select-ajaxmultiselectfield)

The results will be stored as JSON array containing the IDs of the selected items, so e.g. `["1", "2"]`.

Methods / Options
-----------------

[](#methods--options)

### setEndpoint(string)

[](#setendpointstring)

Set a custom search endpoint by passing the whole url.

### setSearchCallback(callable)

[](#setsearchcallbackcallable)

Pass a callback function executed on each search request. Uses the `search` method defined in the field class.

### setMinSearchChars(int)

[](#setminsearchcharsint)

Change the amount of characters required for searches to be executed (defaults to 3).

### setPlaceholder(string)

[](#setplaceholderstring)

Change the default placeholder text of the input field.

### setGetVars(array)

[](#setgetvarsarray)

Set a list of custom GET vars which should be added to each request. Have to be in format \["key" => "value"\].

### setSearchHeaders(array)

[](#setsearchheadersarray)

Set a list of custom request headers sent with each search request. Have to be in format \["key" => "value"\].

### setIdOnlyMode(bool) \[only single select\]

[](#setidonlymodebool-only-single-select)

En-/disable the idOnlyMode. If active the field will only store the "id" of the selected result. Otherwise the full result payload will be stored.

Note that the search endpoint or callback has to support requests with a ?id param returning only that one result if the mode is active.

### setDisplayFields(array) \[only multi select\]

[](#setdisplayfieldsarray-only-multi-select)

Define the list of fields to display for selected items, so basically the table columns. Defaults to `id` and `title`.

### enableSorting / disableSorting \[only multi select\]

[](#enablesorting--disablesorting-only-multi-select)

En-/disable the ability to sort the selected items by their display fields.

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

[](#installation)

`composer require level51/silverstripe-ajax-select-field`

Usage Example
-------------

[](#usage-example)

### Single Select

[](#single-select)

```
AjaxSelectField::create('MyField', 'My Field Label')
    ->setSearchCallback(
        function ($query, $request) {
            // This part is only required if the idOnlyMode is active
            if ($id = $request->getVar('id')) {
                $page = SiteTree::get()->byID($id);
                return [
                    'id' => $page->ID,
                    'title' => $page->Title
                ];
            }

            $results = [];
            foreach (SiteTree::get()->filter('Title:PartialMatch', $query) as $page) {
                $results[] = [ 'id' => $page->ID, 'title' => $page->Title ];
            }

            return $results;
    })
```

### Multi Select

[](#multi-select)

```
AjaxMultiSelectField::create('MyField', 'My Field Label')
    ->setSearchCallback(
        function ($query, $request) {
            // Return detail info for the selected ids on load
            if ($ids = $request->getVar('ids')) {
                foreach (SiteTree::get()->filter('ID', $ids) as $page) {
                    return [
                        'id' => $page->ID,
                        'title' => $page->Title,
                        'urlSegment' => $page->URLSegment // example of a custom field, see also below
                    ];
                }
            }
            $results = [];
            foreach (SiteTree::get()->filter('Title:PartialMatch', $query) as $page) {
                $results[] = [ 'id' => $page->ID, 'title' => $page->Title, 'urlSegment' => $page->URLSegment ];
            }

            return $results;
    })->setDisplayFields([ 'title' => 'Custom Label', 'urlSegment' => 'URL' ])
```

Requirements
------------

[](#requirements)

- SilverStripe ^4 | ^5
- PHP >=7.1
- ext-json

Maintainer
----------

[](#maintainer)

- Level51

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity27

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity45

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 95.8% 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 ~111 days

Recently: every ~138 days

Total

11

Last Release

806d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/441f0e8f95c17048417a33f37e35d5ffdd4c07902cbedaf7f5786f4b7c454284?d=identicon)[JZubero](/maintainers/JZubero)

---

Top Contributors

[![dkliemsch](https://avatars.githubusercontent.com/u/13777159?v=4)](https://github.com/dkliemsch "dkliemsch (68 commits)")[![natino45](https://avatars.githubusercontent.com/u/2266241?v=4)](https://github.com/natino45 "natino45 (2 commits)")[![rasstislav](https://avatars.githubusercontent.com/u/9253113?v=4)](https://github.com/rasstislav "rasstislav (1 commits)")

---

Tags

silverstripeajaxdropdownselect

### Embed Badge

![Health badge](/badges/level51-silverstripe-ajax-select-field/health.svg)

```
[![Health](https://phpackages.com/badges/level51-silverstripe-ajax-select-field/health.svg)](https://phpackages.com/packages/level51-silverstripe-ajax-select-field)
```

###  Alternatives

[snapappointments/bootstrap-select

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support.

9.8k480.4k3](/packages/snapappointments-bootstrap-select)[kartik-v/dependent-dropdown

A multi level dependent dropdown JQuery plugin that allows nested dependencies.

1805.0M3](/packages/kartik-v-dependent-dropdown)[harvesthq/chosen

Chosen is a JavaScript plugin that makes select boxes user-friendly. It is currently available in both jQuery and Prototype flavors.

385.2M12](/packages/harvesthq-chosen)[ziffmedia/nova-select-plus

A Nova select field for simple and complex select inputs

96578.4k1](/packages/ziffmedia-nova-select-plus)[dnadesign/silverstripe-advanceddropdowns

DropdownField and GroupedDropdownField that allows the use of data-attributes on each option tag

1717.3k](/packages/dnadesign-silverstripe-advanceddropdowns)[jjj/chosen

Chosen is a JavaScript plugin that makes select boxes user-friendly. It is currently available in both jQuery and Prototype flavors.

27522.1k2](/packages/jjj-chosen)

PHPackages © 2026

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