Disable hint

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 _(add items here for easier creation of next log entry)_
 
+- [Feature] Add and document `displayHint` option.
 - Allow space to confirm an option, fixes #98.
 
 ## 1.4.1 - 2017-07-06

README.md

@@ -187,6 +187,12 @@ Type: `string`
 
 Specify a string to prefill the autocomplete with.
 
+#### `displayHint` (default: `true`)
+
+Type: `boolean`
+
+You can set this property to false to prevent the hint from being displayed when autoselect is on.
+
 #### `displayMenu` (default: `'inline'`)
 
 Type: `'inline' | 'overlay'`

examples/index.html

@@ -80,6 +80,11 @@ <h3><code>{ autoselect: true }</code></h3>
       <label for="autocomplete-autoselect">Select your country</label>
       <div id="tt-autoselect" class="autocomplete-wrapper"></div>
 
+      <h3><code>{ autoselect: true, displayHint: false }</code></h3>
+      <p>This option will automatically select the first suggestion without displaying a hint.</p>
+      <label for="autocomplete-noHint">Select your country</label>
+      <div id="tt-noHint" class="autocomplete-wrapper"></div>
+
       <h3><code>{ defaultValue: 'Germany' }</code></h3>
       <p>This option will prefill the input with a value.</p>
       <label for="autocomplete-defaultValue">Select your country</label>
@@ -435,6 +440,18 @@ <h3>Custom results</h3>
       })
     </script>
 
+    <script type="text/javascript">
+      element = document.querySelector('#tt-noHint')
+      id = 'autocomplete-noHint'
+      accessibleAutocomplete({
+        autoselect: true,
+        displayHint: false,
+        element: element,
+        id: id,
+        source: countries
+      })
+    </script>
+
     <script type="text/javascript">
       element = document.querySelector('#tt-overlay')
       id = 'autocomplete-overlay'

src/autocomplete.js

@@ -44,14 +44,15 @@ function onChangeCrossLibrary (handler) {
 export default class Autocomplete extends Component {
   static defaultProps = {
     autoselect: false,
+    confirmOnBlur: true,
     cssNamespace: 'autocomplete',
     defaultValue: '',
+    displayHint: true,
     displayMenu: 'inline',
     minLength: 0,
     name: 'input-autocomplete',
     placeholder: '',
     onConfirm: () => {},
-    confirmOnBlur: true,
     showNoOptionsFound: true,
     showAllValues: false,
     required: false
@@ -384,7 +385,7 @@ export default class Autocomplete extends Component {
   }
 
   render () {
-    const { cssNamespace, displayMenu, id, minLength, name, placeholder, required, showAllValues } = this.props
+    const { cssNamespace, displayHint, displayMenu, id, minLength, name, placeholder, required, showAllValues } = this.props
     const { focused, hovered, menuOpen, options, query, selected } = this.state
     const autoselect = this.hasAutoselect()
 
@@ -418,7 +419,7 @@ export default class Autocomplete extends Component {
     const hintValue = (optionBeginsWithQuery && autoselect)
       ? query + selectedOptionText.substr(query.length)
       : ''
-    const showHint = hasPointerEvents && hintValue
+    const showHint = hasPointerEvents && hintValue && displayHint
 
     return (
       <div className={wrapperClassName} onKeyDown={this.handleKeyDown}>