Autocomplete

Create an Autocomplete Input

Autocomplete input allows the end user to search through and select one of the options. Autocomplete_options is an associative array where the name and value will be used accordingly for the options name (visible to the end user) and value (the value passed when the form is submitted).

$options = ["Benz" => "mercedes", "Hyundai" => "hyundai", "BMW" => "bmw", "KIA" => "kia", "Toyota" => "toyota", "Ford" => "ford"]

:: input:autocomplete(label: "Select Car Brand", name: "car_brand", options: $options)

Allow Multiple Selections

By setting select_multiple to TRUE, input:autocomplete allows the end user to select multiple items from your given array of options. When the input values are submitted, you will recieve all selected values.

$options = ["Benz" => "mercedes", "Hyundai" => "hyundai", "BMW" => "bmw", "KIA" => "kia", "Toyota" => "toyota", "Ford" => "ford"]


input:autocomplete(select_multiple: TRUE, options: $options, label: "Select Car Brand", name: "car_brand")

Set Values

You can set the values of an autocomplete input by passing an indexed array that contains the value or the values you wish your input to have.

$options = ["Benz" => "mercedes", "Hyundai" => "hyundai", "BMW" => "bmw", "KIA" => "kia", "Toyota" => "toyota", "Ford" => "ford"]
$values = ["kia", "toyota", "ford"]

input:autocomplete(options: $options, values: $values, label: "Select Car Brand", name: "car_brand", select_multiple: TRUE)

Disable the Autocomplete Input

Autocomplete input acts the same way as a regular input, so you can easily disable the input by setting the $disabled argument to TRUE.

$options = ["Benz" => "mercedes", "Hyundai" => "hyundai", "BMW" => "bmw", "KIA" => "kia", "Toyota" => "toyota", "Ford" => "ford"]

:: input:autocomplete(disabled: TRUE, label: "Select Car Brand", name: "car_brand", options: $options)

Set the Width

You can set the $width argument to any HTML accepted value such as px, %, em, etc. to change the size of the entire input accordingly.

$width = "50%"
$options = ["Benz" => "mercedes", "Hyundai" => "hyundai", "BMW" => "bmw", "KIA" => "kia", "Toyota" => "toyota", "Ford" => "ford"]

:: input:autocomplete(width: $width, label: "Select Car Brand", name: "car_brand", options: $options)

Remote Data

Autocomplete can fetch its input options from your specified URL. With every keystroke from the end user an api call is made to the specified URL. Your URL needs to return a json object of the input options.

$url = 'https://example.com/autocomplete_options.json'
:: input:autocomplete(label: "Dynamic Options", label_tooltip: "Please select from this list that changes on every keystroke", name: "dynamic_options", stacked: TRUE, api_url: $url)