Nova Text Auto Complete Laravel Package

Getting Started

The package is a thin wrapper around Nova's built-in Text field that renders a native HTML <datalist> (or equivalent suggestion list) behind the input, so users get browser-driven autocomplete while still being able to type free text.

Minimal path:

1. Install alongside an existing Nova app (Nova 3-era; verify against your Nova version first):

   composer require gkermer/nova-text-auto-complete
   

   There is typically no publish step — the field registers its compiled assets via the package service provider. If suggestions don't render, run php artisan nova:publish and check the provider is auto-discovered.
2. Swap the field in a resource:

   use Gkermer\TextAutoComplete\TextAutoComplete;
   
   public function fields(Request $request)
   {
       return [
           TextAutoComplete::make('Tag')
               ->items(['laravel', 'nova', 'php']),
       ];
   }
   

   (Confirm the exact list-setter name against the README of the version you pin — small packages like this often use items() or options(); reading the field class itself is faster than guessing.)
3. First use case: replace a plain text input where you want suggestions but can't afford a full select — tags, country/city names, categories, email domains, SKU prefixes. It's the "soft enum" field.

Where to look first: the field's PHP class (to see which methods proxy to the Vue component and which props are passed) and resources/js/components/Field.vue (to see exactly what element gets the suggestion list). That tells you more than the README at this age.

Implementation Patterns

Static list from config/enum. Keep the canonical list in one place and feed it in:

TextAutoComplete::make('Environment')
    ->items(['local', 'staging', 'production'])
    ->rules('required', Rule::in(['local','staging','production']))

The datalist is a UX hint only — always pair it with Rule::in or a validation rule, otherwise the field silently accepts anything typed.

Suggestions derived from existing data. The common day-to-day pattern is "suggest what already exists" so users don't create near-duplicates:

TextAutoComplete::make('Author')
    ->items(
        Post::query()->distinct()->orderBy('author')->limit(200)->pluck('author')->all()
    )

Cap and order the query. Hydrating thousands of options into a datalist is the single most common way this field makes a form feel slower than the plain text input it replaced.

Seed-and-extend fields. Pair it with a resolveUsing/fillUsing or a mutator to normalize casing/whitespace before saving, so the suggestion list doesn't drift into PHP, php, Php variants. Normalize on write, then the derived list stays clean.

Conditional / dependent forms. Because it's just a Text field underneath, dependsOn, onlyOnForms, hideWhenCreating, and nullable all behave as usual. Use onlyOnForms() liberally — autocomplete on an index column adds no value.

Reuse via a small builder. Wrap repeated configuration in a private method or a custom field subclass:

private function tagField(string $name): TextAutoComplete
{
    return TextAutoComplete::make($name)
        ->items(config('tags.suggestions'))
        ->rules('nullable', 'string', 'max:50')
        ->onlyOnForms();
}

Gotchas and Tips

• Version risk is the headline. Last release January 2021, 22 stars, no recent maintenance. Nova 4/5 changed asset registration and Vue versions significantly; the field may not mount cleanly. Test on a staging Nova install before committing, and be ready to vendor/fork it — the field is small enough to copy into nova-components/ and own.
• Datalist ≠ validation. Browsers show suggestions but submit whatever was typed. Combine with Rule::in() where the value must be constrained, and ->nullable() where it must not.
• Matching is browser-native and literal. Users see prefix/substring matches per their browser's behavior; there's no fuzzy search, no async remote lookup, no debounce. If you need "search a table of 50k records", this is the wrong field — use a searchable BelongsTo or build a custom field with an async endpoint.
• Duplicate and empty entries pollute the dropdown. ->distinct()->whereNotNull(...) on the source query; trim values before passing them in.
• Case sensitivity surprises. php won't necessarily suggest when the stored option is PHP. Normalize the option list and the saved value to the same case.
• Debugging checklist: confirm the field's Vue component is registered (Nova::script/Nova::style in the package provider or nova-components build), inspect the input in DevTools for the attached suggestion list, and check the browser console for asset 404s after nova:publish. If the input renders but has no suggestions, the prop name passed from PHP probably doesn't match the one the component reads.
• Extension points: subclass the field to add helpers (fromModel(), fromConfig()), or override the Vue component if you need debounced/async suggestions. Because it extends Text, resolveUsing, displayUsing, fillUsing, and the usual rule/hydration hooks remain available — lean on those rather than forking.
• Don't rely on it for index/detail views. Suggestions only make sense on forms; keep onlyOnForms() so you don't ship dead markup to read-only screens.