diff --git a/demo/assets/js/testable.js b/demo/assets/js/testable.js index 25644e9..4136354 100644 --- a/demo/assets/js/testable.js +++ b/demo/assets/js/testable.js @@ -507,6 +507,11 @@ const test4 = typeahead({ wrapper: 'typeahead-standalone typeahead-test-four', }, highlight: true, + // autoSelect: true, + onSubmit: (e) => { + e.preventDefault(); + document.querySelector('#input-4-submit-val').innerHTML = e.target.value; + }, templates: { suggestion: (item, resultSet) => { return ` @@ -982,5 +987,3 @@ const test19 = typeahead({ `, }, }); - - diff --git a/demo/dev.esm.html b/demo/dev.esm.html index 74a2bdf..b706bf7 100644 --- a/demo/dev.esm.html +++ b/demo/dev.esm.html @@ -175,6 +175,9 @@

Try searching for marvel/DC movies...

className: 'typeahead-example', minLength: 1, limit: 10, + onSubmit: (e, selectedSuggestion) => { + console.log(`Submitted value -> ${e.target.value}`); + }, templates: { suggestion: (item) => { const date = item.release_date diff --git a/demo/testable.html b/demo/testable.html index a9c04ed..56456a7 100644 --- a/demo/testable.html +++ b/demo/testable.html @@ -91,7 +91,7 @@

3B. Transform Remote

4. Templates, Source: Local, Object Arr

-

Used Templates: header; footer; suggestion; group; notFound

+

Used Templates: header; footer; suggestion; group; notFound

diff --git a/src/typeahead-standalone.ts b/src/typeahead-standalone.ts index e961784..af53a0a 100644 --- a/src/typeahead-standalone.ts +++ b/src/typeahead-standalone.ts @@ -454,6 +454,11 @@ const typeahead = (config: typeaheadConfig): typeaheadR return clear(); } + // clear selected items on deleting characters + if (ev.key === 'Backspace') { + selected = undefined; + } + if (resultSet.hits.length && (ev.key === 'ArrowUp' || ev.key === 'ArrowDown')) { ev.key === 'ArrowDown' ? selectNext(ev) : selectPrev(ev); update(); @@ -465,7 +470,7 @@ const typeahead = (config: typeaheadConfig): typeaheadR } // if empty query, do nothing - if (!resultSet.query) return; + if (!resultSet.query && !input.value.length) return; const useSelectedValue = (fallback = false) => { if (!selected && fallback && resultSet.hits.length) {