better passing of vars to autosuggest

demo2/src/app.js

@@ -53,7 +53,11 @@ Promise.all([
       paging: { elementId: 'paging', pageSize: 2 },
       searchInput: {
         elementId: 'searchbox',
-        suggestionsElementId: 'suggestions'
+        suggestions: {
+          elementId: 'suggestions'
+          // limit: 10,
+          // threshold: 1
+        }
       }
     })
 )

src/ui/Autocomplete.js

@@ -1,11 +1,13 @@
 export class Autocomplete {
-  constructor (searchboxEl, DICTIONARY, search, suggestionsElementId) {
-    this.DICTIONARY = DICTIONARY
+  constructor(searchboxEl, search, suggestions = {}) {
+    this.autoCompleteFunction = suggestions.autoCompleteFunction
     this.currentFocus = -1
     this.searchboxEl = searchboxEl
     this.search = search
+    this.limit = suggestions.limit || 20
+    this.threshold = suggestions.threshold || 2
     this.autocompleteListId = searchboxEl.id + '-autocomplete-list'
-    this.suggestionsElementId = suggestionsElementId
+    this.suggestionsElementId = suggestions.elementId
     searchboxEl.addEventListener('input', this.searchBoxInputListener)
     searchboxEl.addEventListener('keydown', this.searchBoxKeydownListener)
     document.addEventListener('click', e => {
@@ -54,12 +56,16 @@ export class Autocomplete {
   }
 
   searchBoxInputListener = async e => {
-    const suggestions = await this.DICTIONARY(e.target.value)
+    const suggestions = (await this.autoCompleteFunction(e.target.value)).slice(
+      0,
+      this.limit
+    )
     let b
     const val = e.target.value
     /* close any already open lists of autocompleted values */
     this.closeAllLists()
     if (!val) return false
+    if (val.length < this.threshold) return false
     this.currentFocus = -1
     /* create a DIV element that will contain the items (values): */
     const a = document.createElement('DIV')

src/ui/SearchInput.js

@@ -1,12 +1,12 @@
 import { Autocomplete } from './Autocomplete.js'
 
 export class SearchInput {
-  constructor (
+  constructor(
     {
       elementId = 'searchInput',
-      suggestionsElementId = 'suggestions',
-      el = document.getElementById(elementId),
-      autoCompleteFunction = new Promise()
+      suggestions = {},
+      el = document.getElementById(elementId)
+      // autoCompleteFunction = new Promise()
     },
     search,
     paging
@@ -16,13 +16,7 @@ export class SearchInput {
       search('searchInput')
     })
 
-    // TODO: this api should probably be cleaned up
-    this.autocomplete = new Autocomplete(
-      el,
-      autoCompleteFunction,
-      search,
-      suggestionsElementId
-    )
+    this.autocomplete = new Autocomplete(el, search, suggestions)
 
     this.el = el
   }

src/ui/UI.js

@@ -5,7 +5,7 @@ import { Facet } from './Facet.js'
 import { SearchInput } from './SearchInput.js'
 
 export class UI {
-  constructor ({
+  constructor({
     index = null,
     count = {},
     hits = {},
@@ -20,8 +20,12 @@ export class UI {
     this.hits = new Hits(hits)
     this.searchInput = new SearchInput(
       {
-        autoCompleteFunction: this.index.DICTIONARY,
-        ...searchInput
+        // autoCompleteFunction: this.index.DICTIONARY,
+        ...searchInput,
+        suggestions: {
+          autoCompleteFunction: this.index.DICTIONARY,
+          ...searchInput.suggestions
+        }
       },
       this.search,
       this.paging