better details for events and docs

Author: Chris Nelson

README.md

@@ -22,16 +22,23 @@ The `items` attribute should contain a json string of option project. The `label
 
 ## Events
 
-- `autocomplete-search` sent when the value of the input changes and is greater than the `minlength`, debounced by the specified interval.
-- `autocomplete-commit` sent when an item is selected either by pressing Enter or clicking an option
-- `autocomplete-close` sent when the element is open and loses focus, on by user pressing Escape
+- `autocomplete-search` sent when the value of the input changes and is greater than the `minlength`, debounced by the specified interval. It will contain a detail with the following properties:
+  - `name` the value of the name attribute for the element. Useful if you have multiple autocompletes sending events to the same back end handler
+  - `query` the value the user has typed into the search input
+- `autocomplete-commit` sent when an item is selected either by pressing Enter or clicking an option. It will contain a 
+detail with the following properties:
+  - `name` the value of the name attribute for the element. Useful if you have multiple autocompletes sending events to the same back end handler
+  - `value` the value for the selected option
+- `autocomplete-close` sent when the element is open and loses focus, or by user pressing Escape
 
 ## Attributes
 
 - `name` This is a required attribute for setting the correct FormData value. It works exactly the same way as the `name` attribute of any other form input.
-- `clear-list-on-select` If true, will cause the options list to have it's children removed when an `autocomplete-commit` event is about to be dispatched.
 - `debounce` The time in milliseconds to debounce before sending an `autocomplete-search` event when the user enters text into the input
 - `value` The value which will be initially used to populate the `FormData` of the associated form.
+- `display-value` this will appear when the element is in the closed state, with an icon next to it indicating
+  the user can click to search for options
+- `min-length` the number of characters the user needs to type to trigger a search.
 - `searchValue` The value which will initially be used to populate the search input.
 - `open` The element will start in the Open mode display the text input
 - `label-property` The property of each item that will be used as the displayed label, defaults to `name`

src/autocomplete-input.js

@@ -207,7 +207,7 @@ export class AutocompleteInputElement extends LitElement {
     if (this.searchInput.value.length >= this.minLength) {
       this.elementInternals.states.add('searching');
       this.dispatchEvent(
-        new CustomEvent('autocomplete-search', { detail: { query: this.searchInput.value } }));
+        new CustomEvent('autocomplete-search', { detail: { query: this.searchInput.value, name: this.name } }));
     }
   }
 
@@ -221,7 +221,7 @@ export class AutocompleteInputElement extends LitElement {
     if (this.clearListOnSelect) {
       this.items = [];
     }
-    this.dispatchEvent(new CustomEvent('autocomplete-commit', { detail: target.dataset, bubbles: true }));
+    this.dispatchEvent(new CustomEvent('autocomplete-commit', { detail: { name: this.name, ...target.dataset }, bubbles: true }));
     this.dispatchEvent(new Event('input', { bubbles: true }));
   }
 

test/autocomplete-input.test.js

@@ -24,13 +24,12 @@ it('emits an autocomplete-search event', async () => {
   const el = await fixture(`
     <autocomplete-input name="foo" open debounce="10"></autocomplete-input>
   `);
-  // el.click();
-  // await el.updated;
   const searchInput = el.shadowRoot.querySelector('input');
-  searchInput.value = 'foo';
+  searchInput.value = 'bar';
   searchInput.dispatchEvent(new Event('input', { bubbles: true }));
   const { detail } = await oneEvent(el, 'autocomplete-search');
-  expect(detail.query).to.equal('foo');
+  expect(detail.query).to.equal('bar');
+  expect(detail.name).to.equal('foo');
 });
 
 it('only dispatches search event when the mininum length is met', async () => {
@@ -49,13 +48,14 @@ it('only dispatches search event when the mininum length is met', async () => {
 describe('the combobox', () => {
   it('builds a combobox and sends autocomplete-commit for a slotted list', async () => {
     const el = await fixture(`
-      <autocomplete-input name="foo" open items='[{"value": "foo", "label": "Foo"}]'>
+      <autocomplete-input name="bar" open items='[{"value": "foo", "label": "Foo"}]'>
       </autocomplete-input>
     `);
     const option = el.shadowRoot.querySelector('li[data-value="foo"]');
     el.addEventListener('autocomplete-commit', (e) => {
       console.debug(e.detail)
       expect(e.detail.value).to.equal('foo');
+      expect(e.detail.name).to.equal('bar');
     });
     option.click();
   });