Autocomplete control.
Type to filter by a hint, then tab- or arrow- or mouse-selecting.
Set the allowNew property to true to allow extra values.
PacemSuggestElement might be useful to quicken dropdown selection of even complex objects.
Define a textProperty and eventually a valueProperty to teach the autocompleter what to show and what to save respectively.
PacemSuggestElement can have a custom itemtemplate, just make the relevant property/attribute point to a custom HTMLTemplateElement.
[{
"name": "Archimedes", "pic": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Domenico-Fetti_Archimedes_1620.jpg/180px-Domenico-Fetti_Archimedes_1620.jpg", "disabled": true
},{
"name": "Galileo Galilei", "pic": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Justus_Sustermans_-Portrait_of_Galileo_Galilei%2C_1636.jpg/189px-Justus_Sustermans-Portrait_of_Galileo_Galilei%2C_1636.jpg"
},{
"name": "Isaac Newton", "pic": "https://upload.wikimedia.org/wikipedia/commons/8/83/Sir_Isaac_Newton%281643-1727%29.jpg"
},{
"name": "Leonhard Euler", "pic": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Leonhard_Euler.jpg/186px-Leonhard_Euler.jpg"
},{
"name": "Friedrich Gauss", "pic": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Carl_Friedrich_Gauss.jpg/186px-Carl_Friedrich_Gauss.jpg"
},{
"name": "Bernhard Riemann", "pic": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Georg_Friedrich_Bernhard_Riemann.jpeg/220px-Georg_Friedrich_Bernhard_Riemann.jpeg"
}]
The PacemSuggestElement can be injected into an autogenerating form via proper metadata.
Assign the relevant property a suggest ui hint:
[ { "prop": "state", "type": "string", "display": { "name": "Fav State", "ui": "suggest" }, "extra": { "itemtemplate": "#template4", "maxSuggestions": 3, "source": [ { "key": "ak", "name": "Alaska" }, { "key": "al", "name": "Alabama" }, { "key": "ar", "name": "Arkansas" }, { "key": "az", "name": "Arizona" }, { "key": "ca", "name": "California" }, { "key": "co", "name": "Colorado" }, { "key": "ct", "name": "Connecticut" }, { "key": "de", "name": "Delaware" }, { "key": "fl", "name": "Florida" }, { "key": "ga", "name": "Georgia" }, { "key": "hi", "name": "Hawaii" }, { "key": "ia", "name": "Iowa" }, { "key": "id", "name": "Idaho" }, { "key": "il", "name": "Illinois" }, { "key": "in", "name": "Indiana" }, { "key": "ks", "name": "Kansas" }, { "key": "ky", "name": "Kentucky" }, { "key": "la", "name": "Louisiana" }, { "key": "ma", "name": "Massachusetts" }, { "key": "md", "name": "Maryland" }, { "key": "me", "name": "Maine" }, { "key": "mi", "name": "Michigan" }, { "key": "mn", "name": "Minnesota" }, { "key": "mo", "name": "Missouri" }, { "key": "ms", "name": "Mississippi" }, { "key": "mt", "name": "Montana" }, { "key": "nc", "name": "North Carolina" }, { "key": "nd", "name": "North Dakota" }, { "key": "ne", "name": "Nebraska" }, { "key": "nh", "name": "New Hampshire" }, { "key": "nj", "name": "New Jersey" }, { "key": "nm", "name": "New Mexico" }, { "key": "nv", "name": "Nevada" }, { "key": "ny", "name": "New York" }, { "key": "oh", "name": "Ohio" }, { "key": "ok", "name": "Oklahoma" }, { "key": "or", "name": "Oregon" }, { "key": "pa", "name": "Pennsylvania" }, { "key": "ri", "name": "Rhode Island" }, { "key": "sc", "name": "South Carolina" }, { "key": "sd", "name": "South Dakota" }, { "key": "tn", "name": "Tennessee" }, { "key": "tx", "name": "Texas" }, { "key": "ut", "name": "Utah" }, { "key": "va", "name": "Virginia" }, { "key": "vt", "name": "Vermont" }, { "key": "wa", "name": "Washington" }, { "key": "wi", "name": "Wisconsin" }, { "key": "wv", "name": "West Virginia" }, { "key": "wy", "name": "Wyoming" } ], "textProperty": "name", "valueProperty": "key", "filterFields": "key,name" } } ]
[ {"prop": "region", "type": "object", "display": { "cssClass": ["field-minimal", "field-nolabel"], "name": "Italian Region", "ui": "suggest", "watermark": "Pick an Italian region..." }, "isComplexType": true, "extra": { "sourceUrl": "/api/test/autocomplete" , "textProperty": "name", "valueProperty": "id" } } ]