PHPackages                             tacoberu/nette-form-selectboxremote - 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. tacoberu/nette-form-selectboxremote

ActiveLibrary[Utility & Helpers](/categories/utility)

tacoberu/nette-form-selectboxremote
===================================

Select, which load options from remote.

v2.0.2(1w ago)15MITJavaScriptPHP >=8.1

Since Jun 21Pushed 1w ago1 watchersCompare

[ Source](https://github.com/tacoberu/nette-form-selectboxremote)[ Packagist](https://packagist.org/packages/tacoberu/nette-form-selectboxremote)[ RSS](/packages/tacoberu-nette-form-selectboxremote/feed)WikiDiscussions 2.0 Synced yesterday

READMEChangelogDependencies (10)Versions (6)Used By (0)

Nette SelectboxRemote
=====================

[](#nette-selectboxremote)

Select, which retrieves data remotely. It's available for large amounts of records that need to be filtered and loaded gradually in pages. The package offers an instant solution for javascript handling via Select2, or TomSelect.

Just as in a regular selectbox an array of values is passed, here a model providing the values is passed instead. The universal `CallbackQueryModel` can serve as the model, resolving everything via callbacks. The package also allows you to create your own custom implementation.

All communication with the backend goes through this model in the very same systematic way — there's no need to create any special AJAX endpoint or presenter action. Loading and filtering data is handled internally by the control through its own signal, just like any other signal in Nette components. Adding `addSelectRemote()` is therefore, from a usage point of view, exactly the same as adding a regular, non-remote selectbox — the only difference is that a model is passed instead of an array of values.

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

[](#installation)

```
composer require tacoberu/nette-form-selectboxremote

```

Version and requirements
------------------------

[](#version-and-requirements)

BranchPHPNette`v2.0`>= 8.1^3.2`v1.2`>= 7.4^3.1Usage
-----

[](#usage)

### Register extension

[](#register-extension)

After registering the extension, the `addSelectRemote()` and `addMultiSelectRemote()` shortcuts are available on the container:

```
extensions:
	- Taco\Nette\Forms\Controls\SelectBoxRemoteExtension

```

### Javascript

[](#javascript)

The package offers two ready-made handlers, both written in TypeScript and compiled into a JS module that's part of the package (`vendor/tacoberu/nette-form-selectboxremote/assets/`). The file is also available directly in the repository and needs to be exposed from your public folder (symlink or copy) and imported as an ES module. Filtering for a given field is available after enabling it with the `data-class="filterable"` attribute on the PHP side:

```
$form->addSelectRemote('category2', 'Category 2:', $model)
	->controlPrototype->data('class', 'filterable');
```

#### Select2

[](#select2)

`assets/remoteselect2.ts` → `assets/remoteselect2.js`, the export `initSelect2Impl(el, overrides?)` is available.

```

		import { initSelect2Impl } from "/js/remoteselect2.js";
		document.querySelectorAll('select')
			.forEach(initSelect2Impl);

```

jQuery is only needed as a dependency of Select2 itself (it's only available as a jQuery plugin) — the `initSelect2Impl` function itself does not depend on jQuery, it reads attributes through the native `element.dataset`. Pagination is available thanks to Select2's built-in `ajax`/`pagination.more` mechanism.

#### TomSelect

[](#tomselect)

`assets/TomSelectAdapter.ts` → `assets/TomSelectAdapter.js`, the export `initTomSelectImpl(el, overrides?)` is available. Unlike Select2, TomSelect is available as a pure vanilla JS solution, with no dependency on jQuery.

```

		import { initTomSelectImpl } from "/js/TomSelectAdapter.js";
		document.querySelectorAll('select')
			.forEach(initTomSelectImpl);

```

Pagination is available thanks to the official `virtual_scroll` plugin (included in `tom-select.complete.min.js`) and is switched on automatically for fields with `data-type="remoteselect"`.

#### Further configuration (overrides)

[](#further-configuration-overrides)

Both functions, `initSelect2Impl` and `initTomSelectImpl`, offer a second, optional parameter — an object that gets merged with the automatically derived settings. This makes any other feature of the given library available, for example reordering items in a multiselect (the `drag_drop` plugin for TomSelect) or the ability to add a new record (`tags: true` for Select2, `create: true` for TomSelect):

```
document.querySelectorAll('select').forEach((el) => {
	const overrides = el.multiple ? { plugins: ['drag_drop'], create: true } : {};
	initTomSelectImpl(el, overrides);
});
```

For TomSelect, `plugins` from the overrides are merged with `virtual_scroll`, which cannot be disabled — without it, pagination over AJAX would not be available.

#### Decorating items

[](#decorating-items)

The model can return arbitrary extra fields per item on top of `id`/`label` (e.g. `flag`, `icon`, `description`) — the library passes them through unchanged all the way to the JS layer. Rendering them (an icon, a flag, a description under the label, ...) is then up to your own template callback, enabled through the same `overrides` parameter:

```
// Select2: templateResult/templateSelection receive the whole item object.
initSelect2Impl(el, {
	templateResult: (data) => `${data.flag ?? ''} ${data.label}`,
});

// TomSelect: render.option/render.item receive the item object and an escape() helper.
initTomSelectImpl(el, {
	render: { option: (data, escape) => `${escape(data.flag ?? '')} ${escape(data.label)}` },
});
```

The example application demonstrates this on the `countries` field (flag + country name) and the `accounts` field (icon on the left, label and description stacked below it) — see `DashboardPresenter::getCountrySelectModel()` / `getAccountSelectModel()` and the corresponding `` in `select2.latte` / `tomselect.latte`.

### Usage in PHP

[](#usage-in-php)

```
$form = new Nette\Forms\Form;

// CallbackQueryModel is buildin implementation of generic QueryModel.
$categorySelectQueryModel = new CallbackQueryModel(function($term, $page, $pageSize) use ($data) {
	$results = [];
	foreach ($data as $x) {
		if ($term && stripos($x->label, $term) === False) {
			continue;
		}
		$results[] = (object) [
			'id' => $x->id,
			'label' => $x->label,
		];
	}
	$total = count($results);
	$offset = ($page - 1) * $pageSize;
	return (object) [
		'total' => $total,
		'items' => array_slice($results, $offset, $pageSize),
	];
}, function($id) use ($data) {
	foreach ($data as $x) {
		if ($x->id === $id) {
			return (array) $x;
		}
	}
	return NULL;
});

// ...

$form->addSelectRemote('category', 'Category:', $categorySelectQueryModel);
$form->addMultiSelectRemote('tags', 'Tags:', $tagsSelectQueryModel);
```

[![This is what the result looks like for Select2](docs/select2.png)](docs/select2.png)

[![This is what the result looks like for TomSelect](docs/tom-select.png)](docs/tom-select.png)

Example application
-------------------

[](#example-application)

`examples/` contains a complete sample Nette application with two pages — `/dashboard/select2` and `/dashboard/tomselect` — demonstrating the same PHP form handled by both JS libraries.

```
composer install
cp .env-example .env
php -S localhost:8001 examples/document_root/router.php
```

The application is then available at the address from `.env` (`APP_URL`).

Building assets (TypeScript)
----------------------------

[](#building-assets-typescript)

```
npm run build:assets
```

The command compiles every `*.ts` file in `assets/` (currently `remoteselect2.ts` and `TomSelectAdapter.ts`) into the matching `.js` file next to it.

E2E tests (Playwright)
----------------------

[](#e2e-tests-playwright)

```
npm install
npx playwright install chromium  # first time only

npm run test:e2e        # run the tests
npm run test:e2e:ui     # interactive UI
```

Two test suites are available: `tests/e2e/remote-select.spec.ts` for the Select2 variant and `remote-select-tomselect.spec.ts` for the same scenarios (loading, loading more, filtering) with TomSelect. The address of the tested application is set in `.env` via `APP_URL`, output is stored in `temp/`.

###  Health Score

41

—

FairBetter than 87% of packages

Maintenance98

Actively maintained with recent releases

Popularity5

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 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 ~0 days

Total

5

Last Release

12d ago

Major Versions

v1.2.1 → v2.0.12026-06-21

v1.2.x-dev → 2.0.x-dev2026-06-21

PHP version history (2 changes)v1.2.1PHP >=7.4

v2.0.1PHP >=8.1

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/1828339?v=4)[Martin Takáč](/maintainers/tacoberu)[@tacoberu](https://github.com/tacoberu)

---

Top Contributors

[![tacoberu](https://avatars.githubusercontent.com/u/1828339?v=4)](https://github.com/tacoberu "tacoberu (20 commits)")

---

Tags

netteajaxremoteformselect

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan, Rector

Type Coverage Yes

### Embed Badge

![Health badge](/badges/tacoberu-nette-form-selectboxremote/health.svg)

```
[![Health](https://phpackages.com/badges/tacoberu-nette-form-selectboxremote/health.svg)](https://phpackages.com/packages/tacoberu-nette-form-selectboxremote)
```

###  Alternatives

[nette/code-checker

✅ Nette CodeChecker: A simple tool to check source code against a set of Nette coding standards.

911.7M6](/packages/nette-code-checker)[harvesthq/chosen

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

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

A Nova select field for simple and complex select inputs

96608.8k2](/packages/ziffmedia-nova-select-plus)[jjj/chosen

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

28597.8k5](/packages/jjj-chosen)[contributte/forms-wizard

Wizard component for nette/forms

15791.1k](/packages/contributte-forms-wizard)[voda/date-input

HTML 5 compatible date / time input field for Nette.

1092.9k1](/packages/voda-date-input)

PHPackages © 2026

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