📝 docs: add details about listScrollOptions config param

README.md

@@ -126,6 +126,7 @@ You can pass the following config options to `typeahead-standalone`:
 |`onSubmit(event, selectedItem?)`|When you want to use typeahead outside a form element, this handler can be used to process/submit the input value. Gets triggered on hitting the ENTER key. First parameter is the keyboard Event and the 2nd parameter is the selected item or undefined if no item was selected|`undefined`|
 |`display(selectedItem, event?) => string`|This callback is executed when the user selects an item from the suggestions. The current suggestion/item is passed as a parameter and it **must return a string** which is set as the input's value. The 2nd *optional* parameter `event` is a Mouse/Keyboard event which can be used to track user interaction or for analytics. It defaults to `null`. |Returns the string representation of the selected item|
 |`tokenizer?: (words: string) => string[]`|The tokenizer function is used to split the search query and the search data by a given character(s). This function is useful when you wish to search hypenated-words or words with a certain prefix/suffix |words are split by space characters (new line, tab, spaces)|
+|`listScrollOptions?: ScrollIntoViewOptions`| Allows fine control over the scroll behaviour for a large list of suggestions that needs scrolling. These options are passed to the `scrollIntoView()` function. [MDN Ref](https://developer.mozilla.org/docs/Web/API/Element/scrollIntoView) | `{ block: "nearest", inline: "nearest", behaviour: "auto"}`|
 
 ---
 

docs/index.html

@@ -119,6 +119,7 @@ <h5 class="center">
  <li><a href="#config?id=classnames" title="classNames config param - typeahead-standalone.js"
  class="section-link">classNames</a></li>
  <li><a href="#config?id=tokenizer" title="tokenizer config param - typeahead-standalone.js" class="section-link">tokenizer</a></li>
+ <li><a href="#config?id=scrolloptions" title="tokenizer config param - typeahead-standalone.js" class="section-link">listScrollOptions</a></li>
  <li><a href="#config?id=templates" title="templates config param - typeahead-standalone.js" class="section-link">templates</a></li>
  </ol>
  </li>
@@ -187,6 +188,7 @@ <h5 class="center">
  <li><a href="#config?id=classnames" title="classNames config param - typeahead-standalone.js"
  class="section-link">classNames</a></li>
  <li><a href="#config?id=tokenizer" title="tokenizer config param - typeahead-standalone.js" class="section-link">tokenizer</a></li>
+ <li><a href="#config?id=scrolloptions" title="tokenizer config param - typeahead-standalone.js" class="section-link">listScrollOptions</a></li>
  <li><a href="#config?id=templates" title="templates config param - typeahead-standalone.js" class="section-link">templates</a></li>
  </ol>
  </li>

docs/pages/config.html

@@ -885,7 +885,35 @@ <h4><a href="#config?id=tokenizer" id="tokenizer" title="tokenizer config param
 </p>
 
 <hr>
-<h4><a href="#config?id=templates" id="templates" title="templates config param - typeahead-standalone.js" class="submenu-link section-link">14. 🎨 templates</h4></a>
+<h4><a href="#config?id=scrolloptions" id="scrolloptions" title="listScrollOptions config param - typeahead-standalone.js" class="submenu-link section-link">14. 🪙 listScrollOptions</h4></a>
+
+<p>
+ The <code>listScrollOptions</code> config option is used to have fine control over the scroll behaviour for a large list of suggestions that needs scrolling.
+ These options are passed to the <a href="https://developer.mozilla.org/docs/Web/API/Element/scrollIntoView" rel="noopener noreferrer"><code>scrollIntoView()</code></a> function.
+</p>
+<div class="codeContainer">
+ <span class="lang">JS</span>
+ <span class="copy" title="Copy to Clipboard"><i class="far fa-copy"></i></span>
+ <pre class="hljs language-js">
+typeahead({
+ input: document.querySelector(".myInput"),
+ source: {
+ // ...
+ },
+ listScrollOptions: {
+ block: 'center', // default -> block: 'nearest'
+ // inline: 'nearest' // default is the same
+ // behaviour: 'smooth', // default -> behaviour: 'auto',
+ }
+});</pre>
+</div>
+<p>
+ Using this config parameter is completely optional. The default values are<br>
+ <code>{ block: 'nearest', inline: 'nearest', behaviour: 'auto' }</code>
+</p>
+
+<hr>
+<h4><a href="#config?id=templates" id="templates" title="templates config param - typeahead-standalone.js" class="submenu-link section-link">15. 🎨 templates</h4></a>
 
 <p>
  The <code>templates</code> config option is used to customize the