Jump to main content Jump to doc navigation

What is input.autocomplete?

Add an auto-complete field to a form quickly and easily using this snippet.

Usage

Example for input.autocomplete using an object:

[[input.autocomplete? &object=`{"name": "sekftUSCities", "sortby": "city_name", "value": "city_name", "label": "city_name"}`]]

Properties

Name Description Default Required Version
input_id The id to assign to the input box. >0.0.1
name The name to assign to the input box. >0.0.1
value The value to assign to the input box. >0.0.1
object JSON array of options to return a combobox list. Yes >0.0.1
filter JSON array to filter the combo list. >0.0.1
helper_snippet Name of the snippet to call by ajax request to change option list. >0.0.1
min_length Minimum number of characters typed before executing filter. 2 >0.0.1
max_rows Maximum number of rows to return and display in the list 15 >0.0.1

object

The object property has several parts to quickly define combo box options from a modx table.

Name Description Default Required Version
name The name of the modx table called by the object name. Yes >0.0.1
sortby The table field to sort by. >0.0.1
value The table field that will be used as the value for the option. Yes >0.0.1
label The table field that will be used as the label for the option. Yes >0.0.1

filter

The filter property has several parts to filter the data returned by the object property.

Name Description Default Required Version
input_id The id of an input field that will dynamically change the options list. >0.0.1
name The object name to base filter on. >0.0.1
field The field that will be used to filter the results. Yes >0.0.1
value The value to filter on. >0.0.1

Examples

Some additional examples

Object

Grabbing data by a table object is simple and straight forward. Using a json string, enter the name of the object, the optional sort by, and the table fields to use in the auto-complete label and value.

[[!input.autocomplete?
    &object=`{"name": "sekftUSCities", "sortby": "city_name", "value": "city_name", "label": "city_name"}`
]]

The auto-complete can also be filtered live using jquery. please view the Advanced Examples for more information.

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

  • modmore
  • STERC
  • Jens Wittmann – Gestaltung & Entwicklung
  • Fabian Christen
  • Digital Penguin
  • Dannevang Digital
  • Sepia River Studios
  • CrewMark
  • Chris Fickling
  • deJaya
  • Following Sea
  • Anton Tarasov
  • eydolan
  • Raffy
  • Lefthandmedia
  • Murray Wood
  • Snow Creative
  • Nick Clark
  • Helen
  • JT Skaggs
  • krisznet
  • YJ
  • Yanni
  • Richard

Budget

$366 per month—let's make that $500!

Learn more