A custom BelongsToMany field for Laravel Nova that provides a multiselect interface with server-side search support, designed for handling large datasets efficiently.

• Server-side search: Search through thousands of records without loading them all
• Debounced search: 300ms debounce to prevent excessive API calls
• Preserves selections: Selected items remain visible while searching
• Nova theme integration: Uses Nova CSS variables for consistent styling
• Dark mode support: Fully compatible with Nova's dark mode
• Dependent fields support: Works with Nova's dependent fields feature

1. Place the package in your nova-components directory
2. Register the package in your composer.json:

{
    "repositories": [
        {
            "type": "path",
            "url": "./nova-components/Belongstomany"
        }
    ],
    "require": {
        "ostheneo/belongstomany": "*"
    }
}

3. Run composer update:

composer update

use Ostheneo\Belongstomany\Belongstomany;

public function fields(NovaRequest $request): array
{
    return [
        Belongstomany::make('Tags', 'tags', Tag::class)
            ->optionsLabel('name'),
    ];
}

Belongstomany::make('Tags', 'tags', Tag::class)
    ->optionsLabel('name')
    ->searchable()
    ->optionsLimit(50),

Belongstomany::make('Tags', 'tags', Tag::class)
    ->optionsLabel('name')
    ->searchable()
    ->optionsLimit(50)
    ->viewable()
    ->rules('required'),

Specifies which field to display as the label in the multiselect dropdown.

->optionsLabel('name')  // Will display the 'name' field of related models

Enables server-side search. When enabled, the field will fetch options from the server based on user input instead of loading all options upfront.

->searchable()  // Enable server-side search

Sets the maximum number of options to load. Works both with and without searchable():

• With searchable(): Limits results returned per search query
• Without searchable(): Limits initial options loaded (uses local filtering)

->optionsLimit(50)  // Load maximum 50 options

When enabled, selected items will be clickable links to their detail pages.

->viewable()  // Make selected items clickable

Apply validation rules to the field.

->rules('required')
->rules(['required', 'min:1'])

Set additional pivot table attributes when syncing relationships.

->setPivot(['added_by' => auth()->id()])

Customize vue-multiselect component labels.

->setMultiselectProps([
    'selectLabel' => 'Press enter to select',
    'deselectLabel' => 'Press enter to remove',
    'selectedLabel' => 'Selected',
])

Customize empty state messages.

->setMultiselectSlots([
    'noOptions' => 'No items available',
    'noResult' => 'No matching items found',
])

Display selected items as a list on the detail page.

->showAsListInDetail()

Your related model must have the standard BelongsToMany relationship defined:

// App\Models\Post.php
public function tags()
{
    return $this->belongsToMany(Tag::class);
}

And the inverse relationship (optional but recommended):

// App\Models\Tag.php
public function posts()
{
    return $this->belongsToMany(Post::class);
}

When searchable() is enabled, the field performs server-side searches with the following behavior:

1. Initial load: Fetches up to optionsLimit records
2. On search: Sends search query to server with 300ms debounce
3. Preserves selections: Currently selected items remain visible even if not in search results

The search is performed on the field specified in optionsLabel().

The field uses Nova's CSS variables for consistent theming:

• --colors-primary-500 / --colors-primary-600 for selected tags
• --colors-gray-* for borders and backgrounds
• Automatic dark mode support

MIT License