Logo Beartropy

Lookup

The x-lookup component is a fully featured autocomplete input.
Supports local/static options, remote data via URL, free text, clearable fields, and customizable option-label/option-value mapping.
Combine any features for advanced UX.
You can customize this component

Basic Static Options

Use static arrays for small datasets:
  • :options: array of items
  • option-label: field name for display text
  • option-value: field name for value sent
  • clearable: adds a clear button
blade 
            
 1<?php
 2$tipos = [
 3  ['id' => 'new', 'name' => 'New'],
 4  ['id' => 'feature', 'name' => 'Feature'],
 5  ['id' => 'fix', 'name' => 'Fix'],
 6];
 7 
 8 
 9<x-lookup
10  name="tipo"
11  label="Tipo"
12  :options="$tipos"
13  option-label="name"
14  option-value="id"
15  clearable
16/>

Presets

All color presets from x-input are also available.
blade 
            
 1<x-lookup label="Default" :options="$items" />
 2<x-lookup gray label="Gray" :options="$items" />
 3<x-lookup red label="Red" :options="$items" />
 4<x-lookup orange label="Orange" :options="$items" />
 5<x-lookup amber label="Amber" :options="$items" />
 6<x-lookup yellow label="Yellow" :options="$items" />
 7<x-lookup lime label="Lime" :options="$items" />
 8<x-lookup green label="Green" :options="$items" />
 9<x-lookup emerald label="Emerald" :options="$items" />
10<x-lookup teal label="Teal" :options="$items" />
11<x-lookup cyan label="Cyan" :options="$items" />
12<x-lookup sky label="Sky" :options="$items" />
13<x-lookup blue label="Blue" :options="$items" />
14<x-lookup indigo label="Indigo" :options="$items" />
15<x-lookup violet label="Violet" :options="$items" />
16<x-lookup purple label="Purple" :options="$items" />
17<x-lookup pink label="Pink" :options="$items" />
18<x-lookup rose label="Rose" :options="$items" />
Code highlighting provided by Torchlight