Autocomplete dropdown UI template flow v.1.3

This flow uses ui-template to generate an autocomplete dropdown. In this example it is used to select from a list of countries.

Msg.topic now sets the label.

Known issue: Only clicking on the "Select" button triggers an output (Keyboard enter doesn't work yet)

[{"id":"1fb84b3f.99a1f5","type":"ui_template","z":"394b4e83.19ef02","group":"53cf504.e9555b","name":"Autocomplete","order":0,"width":"0","height":"0","format":"<table>\n    <tr>\n        <td height=\"90\" width=\"220\"><md-autocomplete md-no-cache=\"true\" md-selected-item=\"selectedItem\" md-items=\"items in msg.options | filter:searchText\" md-select-on-match=\"true\"  md-search-text=\"searchText\" placeholder=\"{{msg.topic}}\" >\n        <span ng-bind=\"items\"></span></md-autocomplete></td>\n        <td><button style=\"text-align:center; height:40px;\" ng-click=\"msg.payload = selectedItem; send(msg)\">Select</button></td>\n    </tr>\n</table>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":915,"y":1360,"wires":[["c759cbbe.82b1a8"]]},{"id":"c759cbbe.82b1a8","type":"debug","z":"394b4e83.19ef02","name":"","active":true,"console":"false","complete":"false","x":1095,"y":1360,"wires":[]},{"id":"3b725772.4a6ae8","type":"change","z":"394b4e83.19ef02","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"[\"Afghanistan\",\"Albania\",\"Algeria\",\"Andorra\",\"Angola\",\"Anguilla\",\"Antigua & Barbuda\",\"Argentina\",\"Armenia\",\"Aruba\",\"Australia\",\"Austria\",\"Azerbaijan\",\"Bahamas\",\"Bahrain\",\"Bangladesh\",\"Barbados\",\"Belarus\",\"Belgium\",\"Belize\",\"Benin\",\"Bermuda\",\"Bhutan\",\"Bolivia\",\"Bosnia & Herzegovina\",\"Botswana\",\"Brazil\",\"British Virgin Islands\",\"Brunei\",\"Bulgaria\",\"Burkina Faso\",\"Burundi\",\"Canada\",\"Cambodia\",\"Cameroon\",\"Cape Verde\",\"Cayman Islands\",\"Chad\",\"Chile\",\"China\",\"Colombia\",\"Congo\",\"Cook Islands\",\"Costa Rica\",\"Cote D Ivoire\",\"Croatia\",\"Cruise Ship\",\"Cuba\",\"Cyprus\",\"Czech Republic\",\"Denmark\",\"Djibouti\",\"Dominica\",\"Dominican Republic\",\"Ecuador\",\"Egypt\",\"El Salvador\",\"Equatorial Guinea\",\"Estonia\",\"Ethiopia\",\"Falkland Islands\",\"Faroe Islands\",\"Fiji\",\"Finland\",\"France\",\"French Polynesia\",\"French West Indies\",\"Gabon\",\"Gambia\",\"Georgia\",\"Germany\",\"Ghana\",\"Gibraltar\",\"Greece\",\"Greenland\",\"Grenada\",\"Guam\",\"Guatemala\",\"Guernsey\",\"Guinea\",\"Guinea Bissau\",\"Guyana\",\"Haiti\",\"Honduras\",\"Hong Kong\",\"Hungary\",\"Iceland\",\"India\",\"Indonesia\",\"Iran\",\"Iraq\",\"Ireland\",\"Isle of Man\",\"Israel\",\"Italy\",\"Jamaica\",\"Japan\",\"Jersey\",\"Jordan\",\"Kazakhstan\",\"Kenya\",\"Kuwait\",\"Kyrgyz Republic\",\"Laos\",\"Latvia\",\"Lebanon\",\"Lesotho\",\"Liberia\",\"Libya\",\"Liechtenstein\",\"Lithuania\",\"Luxembourg\",\"Macau\",\"Macedonia\",\"Madagascar\",\"Malawi\",\"Malaysia\",\"Maldives\",\"Mali\",\"Malta\",\"Mauritania\",\"Mauritius\",\"Mexico\",\"Moldova\",\"Monaco\",\"Mongolia\",\"Montenegro\",\"Montserrat\",\"Morocco\",\"Mozambique\",\"Namibia\",\"Nepal\",\"Netherlands\",\"Netherlands Antilles\",\"New Caledonia\",\"New Zealand\",\"Nicaragua\",\"Niger\",\"Nigeria\",\"Norway\",\"Oman\",\"Pakistan\",\"Palestine\",\"Panama\",\"Papua New Guinea\",\"Paraguay\",\"Peru\",\"Philippines\",\"Poland\",\"Portugal\",\"Puerto Rico\",\"Qatar\",\"Reunion\",\"Romania\",\"Russia\",\"Rwanda\",\"Saint Pierre & Miquelon\",\"Samoa\",\"San Marino\",\"Satellite\",\"Saudi Arabia\",\"Senegal\",\"Serbia\",\"Seychelles\",\"Sierra Leone\",\"Singapore\",\"Slovakia\",\"Slovenia\",\"South Africa\",\"South Korea\",\"Spain\",\"Sri Lanka\",\"St Kitts & Nevis\",\"St Lucia\",\"St Vincent\",\"St. Lucia\",\"Sudan\",\"Suriname\",\"Swaziland\",\"Sweden\",\"Switzerland\",\"Syria\",\"Taiwan\",\"Tajikistan\",\"Tanzania\",\"Thailand\",\"Timor L'Este\",\"Togo\",\"Tonga\",\"Trinidad & Tobago\",\"Tunisia\",\"Turkey\",\"Turkmenistan\",\"Turks & Caicos\",\"Uganda\",\"Ukraine\",\"United Arab Emirates\",\"United States of America\",\"United Kingdom\",\"Uruguay\",\"Uzbekistan\",\"Venezuela\",\"Vietnam\",\"Virgin Islands (US)\",\"Yemen\",\"Zambia\",\"Zimbabwe\"]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":725,"y":1360,"wires":[["1fb84b3f.99a1f5"]]},{"id":"d72df936.e5b118","type":"inject","z":"394b4e83.19ef02","name":"","topic":"Countries","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"x":530,"y":1360,"wires":[["3b725772.4a6ae8"]]},{"id":"53cf504.e9555b","type":"ui_group","z":"","name":"test","tab":"52aaa596.768b7c","disp":true,"width":"12"},{"id":"52aaa596.768b7c","type":"ui_tab","z":"","name":"Test","icon":"dashboard"}]

Flow Info

Created 7 years, 1 month ago
Rating: 5 1

Owner

Actions

Rate:

Node Types

Core
  • change (x1)
  • debug (x1)
  • inject (x1)
Other
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)

Tags

  • dropdown
  • autocomplete
  • ui
  • countries
  • input
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option