Document converse-autocomplete and always add closing tag

Weird parsing issues happen when a closing tag is not present.

src/modals/templates/add-contact.js

@@ -46,7 +46,7 @@ export default (el) => {
 
                         <div class="form-group add-xmpp-contact__group">
                             <label class="clearfix" for="name">${i18n_group}:</label>
-                            <converse-autocomplete .getAutoCompleteList="${() => el.getGroupsAutoCompleteList()}" name="group"/>
+                            <converse-autocomplete .getAutoCompleteList="${() => el.getGroupsAutoCompleteList()}" name="group"></converse-autocomplete>
                         </div>
 
                         <div class="form-group"><div class="invalid-feedback">${i18n_error_message}</div></div>

src/plugins/muc-views/templates/ad-hoc.js

@@ -22,7 +22,7 @@ export default (o) => {
                     <converse-autocomplete
                         .getAutoCompleteList="${getAutoCompleteList}"
                         placeholder="${i18n_jid_placeholder}"
-                        name="jid"/>
+                        name="jid"></converse-autocomplete>
                 </label>
             </fieldset>
             <fieldset class="form-group">

src/plugins/muc-views/templates/add-muc.js

@@ -38,7 +38,7 @@ export default (o) => {
                             <converse-autocomplete
                                 .getAutoCompleteList="${getAutoCompleteList}"
                                 placeholder="${o.chatroom_placeholder}"
-                                name="chatroom"/>
+                                name="chatroom"></converse-autocomplete>
                         </div>
                         ${ o.muc_roomid_policy_hint ?  html`<div class="form-group">${unsafeHTML(DOMPurify.sanitize(o.muc_roomid_policy_hint, {'ALLOWED_TAGS': ['b', 'br', 'em']}))}</div>` : '' }
                         ${ !api.settings.get('locked_muc_nickname') ? nickname_input(o) : '' }

src/shared/autocomplete/component.js

@@ -4,13 +4,46 @@ import { FILTER_CONTAINS, FILTER_STARTSWITH } from './utils.js';
 import { api } from '@converse/headless/core';
 import { html } from 'lit';
 
+
+/**
+ * A custom element that can be used to add auto-completion suggestions to a form input.
+ * @class AutoCompleteComponent
+ *
+ * @property { Boolean } [autofocus=false]
+ *  Should the `focus` attribute be set on the input element?
+ * @property { Function } getAutoCompleteList
+ *  A function that returns the list of autocomplete suggestions
+ * @property { Boolean } [auto_evaluate=true]
+ *  Should evaluation happen automatically without any particular key as trigger?
+ * @property { Boolean } [auto_first=false]
+ *  Should the first element automatically be selected?
+ * @property { "contains" | "startswith" } [filter="contains"]
+ *  Provide matches which contain the entered text, or which starts with the entered text
+ * @property { String } [include_triggers=""]
+ *  Space separated characters which should be included in the returned value
+ * @property { Number } [min_chars=1]
+ *  The minimum number of characters to be entered into the input before autocomplete starts.
+ * @property { String } [name]
+ *  The `name` attribute of the `input` element
+ * @property { String } [placeholder]
+ *  The `placeholder` attribute of the `input` element
+ * @property { String } [triggers]
+ *  String of space separated characters which trigger autocomplete
+ *
+ * @example
+ *     <converse-autocomplete
+ *         .getAutoCompleteList="${getAutoCompleteList}"
+ *         placeholder="${placeholder_text}"
+ *         name="foo">
+ *     </converse-autocomplete>
+ */
 export default class AutoCompleteComponent extends CustomElement {
     static get properties () {
         return {
             'autofocus': { type: Boolean },
             'getAutoCompleteList': { type: Function },
             'auto_evaluate': { type: Boolean },
-            'auto_first': { type: Boolean }, // Should the first element be automatically selected?
+            'auto_first': { type: Boolean },
             'filter': { type: String },
             'include_triggers': { type: String },
             'min_chars': { type: Number },
@@ -22,14 +55,15 @@ export default class AutoCompleteComponent extends CustomElement {
 
     constructor () {
         super();
-        this.auto_evaluate = true; // Should evaluation happen automatically without any particular key as trigger?
-        this.auto_first = false; // Should the first element be automatically selected?
+        this.position = "above";
+        this.auto_evaluate = true;
+        this.auto_first = false;
         this.filter = 'contains';
-        this.include_triggers = ''; // Space separated chars which should be included in the returned value
+        this.include_triggers = '';
         this.match_current_word = false; // Match only the current word, otherwise all input is matched
         this.max_items = 10;
         this.min_chars = 1;
-        this.triggers = ''; // String of space separated chars
+        this.triggers = '';
     }
 
     render () {