Text Auto Complete Laravel Package

Getting Started

The package adds a single Nova field, TextAutoComplete, that behaves exactly like Laravel\Nova\Fields\Text but renders a browser autocomplete dropdown driven by a PHP array you pass in. It stores a plain string — no JSON, no pivot table, no relation — which is the entire reason to reach for it over Select or BelongsTo.

1. Install

composer require lhilton/text-auto-complete

It is not in Nova's official field list, so confirm the version constraint in the package's composer.json matches your Nova major (the 2021-01-21 release predates Nova 4). If Composer refuses, add the GitHub repo as a VCS repository and pin the branch.

2. Register / build assets if required

Check whether dist/js/field.js ships in the release. If it does not, you must build the package's Vue component yourself:

cd vendor/lhilton/text-auto-complete
npm install && npm run prod

3. First use case

The canonical fit is a free-text field with a "memory": a city, a supplier name, a category, a job title — values where 90% of the time the user picks an existing one but occasionally needs to type something new. Open app/Nova/YourResource.php, add the field, and look at the package's src/ first — the field class is short and the options/suggestions method name is the only API surface you need to learn.

use Lhilton\TextAutoComplete\TextAutoComplete;

public function fields(Request $request)
{
    return [
        TextAutoComplete::make('City')
            ->options(['Auckland', 'Wellington', 'Christchurch'])
            ->rules('required', 'string', 'max:255'),
    ];
}

Load the form, start typing, and confirm the dropdown appears. That's the whole happy path — everything below is about the edges.

Implementation Patterns

Everything Text can do, this can do. Because the field extends Nova's Text, reach for the familiar chain rather than looking for package-specific methods: ->rules(), ->nullable(), ->default(), ->placeholder(), ->help(), ->maxlength(255), ->sortable(), ->onlyOnForms(). This is the main reason to prefer it over a custom Vue field.

Pull options from the database instead of hard-coding. Compute them in fields() — that is the safest place, since closure support on ->options() is not guaranteed by a 2-star package:

->options(
    Customer::query()->distinct()->orderBy('city')->pluck('city')->all()
)

Cache it if the table is big: Cache::remember('cities', 3600, fn () => ...). Keep the array in the low hundreds; every option is serialized into the Nova field metadata and shipped with the form.

Use it as a soft suggestion, not a constraint. The field does not validate against the list. If you want strictness, add an explicit rule, and build it from the same source so the two cannot drift:

$cities = City::pluck('name')->all();

TextAutoComplete::make('City')
    ->options($cities)
    ->rules(['required', Rule::in($cities)]);

If you don't want strictness (the usual case), do nothing — a typed value that isn't in the list saves normally, which is the point.

Display on index/detail with a plain Text. The autocomplete component is a form-only concern. Either add ->onlyOnForms() and declare Text::make('City') separately for index, or leave it and accept that Nova falls back to the inherited text rendering. Many teams prefer an explicit pair for clarity.

Decouple the column name from the field label with the standard Nova tools when the backing column is not the snake_case of the label:

TextAutoComplete::make('Delivery City', 'delivery_city')

Combine with dependent fields at form-build time. There is no AJAX/remote-search mode, so true cascading (country → city) has to be recalculated server-side; the pragmatic option is to key the options off the resource's current model state and accept a page reload, or drop to dependsOn/BelongsTo if you need live filtering.

Vendor it if you're committing to it. With 2 stars and no dependents, treat the package as a code sample: copy src/TextAutoComplete.php into app/Nova/Fields/ and the Vue component into your own resources/js, then register it in nova.mix.js. You get the same UX with zero supply-chain risk and the ability to patch Nova-version issues yourself.

Gotchas and Tips

Nova version drift is the biggest risk. The January 2021 release targets the Nova 3 asset pipeline (Nova.booting, mix vs nova.mix.js). On Nova 4+ the field may render nothing, or the dropdown silently fails while the input still works — a failure mode that looks like "autocomplete is broken" but is really "the Vue component never registered." Check the browser console and nova-components build output first.

Assets must actually be published/built. If the dropdown doesn't appear but the input does, it's almost always a missing dist/js/field.js or a stale build. Rebuild with npm run prod in the package directory and hard-refresh; Nova caches compiled assets aggressively.

There is no remote search. The name says "array of values" and it means it — all options are inlined in the field meta at render time. If you need "type 3 characters, query the server," this is the wrong package; use Nova's searchable BelongsTo or write a custom field.

Free text means bad data unless you guard it. The autocomplete is a UX hint, not a validator. Expect casing/whitespace variants (Auckland vs auckland) in your database within a week. Normalize on save with ->fillUsing() or a model mutator.

Rule::in() needs the exact same array. Trailing spaces in DB values, case differences, or a cached option list going stale will produce confusing validation failures on values the user literally picked from the dropdown. Build the options once, reuse the variable, and be wary of caching one but not the other.

Large option arrays bloat every form request. A few thousand suggestions will slow the Nova form response noticeably, because the array is embedded in the JSON payload for the field. If you're past ~500 entries, either filter by context or reconsider the field type.

Watch the composer constraint, not the README. Because Nova is not on Packagist, field packages often place laravel/nova in require-dev or omit it entirely, so composer require can "succeed" on an incompatible Nova and fail only at runtime. Read composer.json before trusting the install.

Debugging tip: inspect the field's serialized meta in the Nova API response (browser devtools → the /nova-api/{resource} request). You'll see the options array and any meta you added via ->withMeta(). If the array is empty there, the problem is PHP-side; if it's populated but no dropdown appears, the problem is the compiled Vue component.

Extension points are thin by design. The class is a small wrapper around Text, so prefer overriding via a subclass in your own app (class CityField extends TextAutoComplete) rather than forking — and keep an eye on the repo, since an unmaintained dependency with no downstream users means no one else will report the bug you hit.