fmoo / react-typeahead

Pure react-based typeahead and typeahead-tokenizer

react-typeahead

A typeahead/autocomplete component for React

react-typeahead is a javascript library that provides a react-based typeahead, or autocomplete text entry, as well as a "typeahead tokenizer", a typeahead that allows you to select multiple results.

Usage

For a typeahead input:

var Typeahead = require('react-typeahead').Typeahead;
React.render(
  <Typeahead
    options={['John', 'Paul', 'George', 'Ringo']}
    maxVisible={2}
  />
);

For a tokenizer typeahead input:

var Tokenizer = require('react-typeahead').Tokenizer;
React.render(
  <Tokenizer
    options={['John', 'Paul', 'George', 'Ringo']}
    onTokenAdd={function(token) {
      console.log('token added: ', token);
    }}
  />
);

Examples

• Basic Typeahead with Topcoat
• Typeahead Tokenizer with Topcoat
• Typeahead Tokenizer with simple styling

API

Typeahead(props)

Type: React Component

Basic typeahead input and results list.

props.options

Type: Array Default: []

An array supplied to the filtering function. Can be a list of strings or a list of arbitrary objects. In the latter case, filterOption and displayOption should be provided.

props.defaultValue

Type: String

A default value used when the component has no value. If it matches any options a option list will show.

props.value

Type: String

Specify a value for the text input.

props.maxVisible

Type: Number

Limit the number of options rendered in the results list.

props.resultsTruncatedMessage

Type: String

If maxVisible is set, display this custom message at the bottom of the list of results when the result are truncated.

props.customClasses

Type: Object Allowed Keys: input, results, listItem, listAnchor, hover, typeahead, resultsTruncated

An object containing custom class names for child elements. Useful for integrating with 3rd party UI kits.

props.placeholder

Type: String

Placeholder text for the typeahead input.

props.disabled

Type: Boolean

Set to true to add disable attribute in the <input> or <textarea> element

props.textarea

Type: Boolean

Set to true to use a <textarea> element rather than an <input> element

props.inputProps

Type: Object

Props to pass directly to the <input> element.

props.onKeyDown

Type: Function

Event handler for the keyDown event on the typeahead input.

props.onKeyPress

Type: Function

Event handler for the keyPress event on the typeahead input.

props.onKeyUp

Type: Function

Event handler for the keyUp event on the typeahead input.

props.onBlur

Type: Function

Event handler for the blur event on the typeahead input.

props.onFocus

Type: Function

Event handler for the focus event on the typeahead input.

props.onOptionSelected

Type: Function

Event handler triggered whenever a user picks an option.

props.filterOption

Type: String or Function

A function to filter the provided options based on the current input value. For each option, receives (inputValue, option). If not supplied, defaults to fuzzy string matching.

If provided as a string, it will interpret it as a field name and fuzzy filter on that field of each option object.

props.displayOption

Type: String or Function

A function to map an option onto a string for display in the list. Receives (option, index) where index is relative to the results list, not all the options. Must return a string.

If provided as a string, it will interpret it as a field name and use that field from each option object.

props.formInputOption

Type: String or Function

A function to map an option onto a string to include in HTML forms (see props.name). Receives (option) as arguments. Must return a string.

If specified as a string, it will interpret it as a field name and use that field from each option object.

If not specified, it will fall back onto the semantics described in props.displayOption.

This option is ignored if you don't specify the name prop. It is required if you both specify the name prop and are using non-string options. It is optional otherwise.

props.defaultClassNames

Type: boolean Default: true

If false, the default classNames are removed from the typeahead.

props.customListComponent

Type: React Component

A React Component that renders the list of typeahead results. This replaces the default list of results.

This component receives the following props :

Passed through

• props.displayOptions
• props.customClasses
• props.onOptionSelected

Created or modified

• props.options
  • This is the Typeahead's props.options filtered and limited to Typeahead.props.maxVisible.
• props.selectionIndex
  • The index of the highlighted option for rendering

props.showOptionsWhenEmpty

Type: boolean Default: false

If true, options will still be rendered when there is no value.

props.allowCustomValues

Type: boolean

If true, custom tags can be added without a matching typeahead selection

Typeahead (Exposed Component Functions)

typeahead.focus

Focuses the typeahead input.

---

Tokenizer(props)

Type: React Component

Typeahead component that allows for multiple options to be selected.

props.options

Type: Array Default: []

An array supplied to the filter function.

props.maxVisible

Type: Number

Limit the number of options rendered in the results list.

props.resultsTruncatedMessage

Type: String

If maxVisible is set, display this custom message at the bottom of the list of results when the result are truncated.

props.name

Type: String

The name for HTML forms to be used for submitting the tokens' values array.

props.customClasses

Type: Object Allowed Keys: input, results, listItem, listAnchor, hover, typeahead, resultsTruncated, token

An object containing custom class names for child elements. Useful for integrating with 3rd party UI kits.

props.placeholder

Type: String

Placeholder text for the typeahead input.

props.disabled

Type: Boolean

Set to true to add disable attribute in the <input> or <textarea> element

props.inputProps

Type: Object

Props to pass directly to the <input> element.

props.onKeyDown

Type: Function

Event handler for the keyDown event on the typeahead input.

props.onKeyPress

Type: Function

Event handler for the keyPress event on the typeahead input.

props.onKeyUp

Type: Function

Event handler for the keyUp event on the typeahead input.

props.onBlur

Type: Function

Event handler for the blur event on the typeahead input.

props.onFocus

Type: Function

Event handler for the focus event on the typeahead input.

props.defaultSelected

Type: Array

A set of values of tokens to be loaded on first render.

props.onTokenRemove

Type: Function Params: (removedToken)

Event handler triggered whenever a token is removed.

props.onTokenAdd

Type: Function Params: (addedToken)

Event handler triggered whenever a token is added.

props.displayOption

Type: String or Function

A function to map an option onto a string for display in the list. Receives (option, index) where index is relative to the results list, not all the options. Can either return a string or a React component.

If provided as a string, it will interpret it as a field name and use that field from each option object.

props.filterOption

Type: String or Function

A function to filter the provided options based on the current input value. For each option, receives (inputValue, option). If not supplied, defaults to fuzzy string matching.

If provided as a string, it will interpret it as a field name and use that field from each option object.

props.searchOptions

Type: Function

A function to filter, map, and/or sort the provided options based on the current input value. Receives (inputValue, options). If not supplied, defaults to fuzzy string matching.

Note: the function can be used to store other information besides the string in the internal state of the component. Make sure to use the displayOption, inputDisplayOption, and formInputOption props to extract/generate the correct format of data that each expects if you do this.

props.inputDisplayOption

Type: String or Function

A function that maps the internal state of the visible options into the value stored in the text value field of the visible input when an option is selected.

Receives (option).

If provided as a string, it will interpret it as a field name and use that field from each option object.

If no value is set, the input will be set using displayOption when an option is selected.

props.formInputOption

Type: String or Function

A function to map an option onto a string to include in HTML forms as a hidden field (see props.name). Receives (option) as arguments. Must return a string.

If specified as a string, it will interpret it as a field name and use that field from each option object.

If not specified, it will fall back onto the semantics described in props.displayOption.

props.defaultClassNames

Type: boolean Default: true

If false, the default classNames are removed from the tokenizer and the typeahead.

props.showOptionsWhenEmpty

Type: boolean Default: false

If true, options will still be rendered when there is no value.

Tokenizer (Exposed Component Functions)

tokenizer.focus

Focuses the tokenizer input.

tokenizer.getSelectedTokens

Type: Function

A function to return the currently selected tokens.

Developing

Setting Up

You will need npm to develop on react-typeahead. Installing npm.

Once that's done, to get started, run npm install in your checkout directory. This will install all the local development dependences, such as gulp and mocha

Testing

react-typeahead uses mocha for unit tests and gulp for running them. Large changes should include unittests.

After updating or creating new tests, run npm run-script build-test to regenerate the test package.

Once that's done, running the tests is easy with gulp:

> gulp test
[00:17:25] Using gulpfile ~/src/react-typeahead/gulpfile.js
[00:17:25] Starting 'test'...


  ․․․․․․․․․․․․․․․

  15 passing (43ms)

[00:17:25] Finished 'test' after 448 ms
[00:17:25] Starting 'default'...
[00:17:25] Finished 'default' after 6.23 μs

Contributing

Basically, fork the repository and send a pull request. It can be difficult to review these, so here are some general rules to follow for getting your PR accepted more quickly:

• All new properties and exposed component function should be documented in the README.md
• Break your changes into smaller, easy to understand commits.
• Send separate PRs for each commit when possible.
• Feel free to rebase, merge, and rewrite commits to make them more readible.
• Add comments explaining anything that's not painfully obvious.
• Add unittests for your change if possible.

react-typeahead's Issues

TypeError: Cannot read property '__reactAutoBindMap' of undefined

Hi,

I was trying to use the Typeahead component with the latest v1.0.3 and I got this error, TypeError: Cannot read property '__reactAutoBindMap' of undefined.I believe this have to do with how Typeahead components are compile via gulp-react, related facebook/react#2661.

Thanks

Invariant Violation: addComponentAsRefTo(...)...

After requiring and adding the Typeahead, I'm running into the following error:

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render method). Try rendering this component inside of a new top-level component which will hold the ref.

I'm adding the component as so:

var QuickSearch = React.createClass({
render: function () {
return(
<Typeahead options={["spam", "foodbar"]}/>
);
}
});

Then making a reference to it in another class:

var Topbar = React.createClass({
render: function() {
return (
<QuickSearch />
);
}
});

This is essentially leading to the typeahead providing a new error when inputting values into the "entry" ref:

Uncaught TypeError: Cannot read property 'getDOMNode' of undefined

Any help or suggestions would greatly be appreciated, thanks!

no window on serve side

For example

https://github.com/fmoo/react-typeahead/blob/master/src/typeahead/index.js#L5

creates a dependency to window prevents server side rendering as is (unless working around it by declaring it as {}).

react-typeahead build errors after npm install

Hello,

I installed react-typeahead with npm

npm install react-typeahead

However, I get build errors:

ERROR in ./~/react-typeahead/src/typeahead/index.js
Module parse failed: /Users/bernadetteguinan/code/wwb-web-app/node_modules/react-   typeahead/src/typeahead/index.js Line 87: Unexpected token <
You may need an appropriate loader to handle this file type.
| 
|     return (
|       <TypeaheadSelector
|         ref="sel" options={ this.state.visible }
|         onOptionSelected={ this._onOptionSelected }
 @ ./~/react-typeahead/src/react-typeahead.js 1:16-38

ERROR in ./~/react-typeahead/src/tokenizer/index.js
Module parse failed: /Users/bernadetteguinan/code/wwb-web-app/node_modules/react-    typeahead/src/tokenizer/index.js Line 52: Unexpected token <
You may need an appropriate loader to handle this file type.
|     var result = this.state.selected.map(function(selected) {
|       return (
|         <Token key={ selected } className={classList}
|           onRemove={ this._removeTokenForValue }>
|           { selected }
 @ ./~/react-typeahead/src/react-typeahead.js 2:16-38

Can anyone help ?? thanks

how to set inputProps

Noob alarm: this issue is probably only due to my not understanding React or react-typeahead yet. If so, sorry for pestering you issues list.

I am trying to control the content of the typeahead input, for instance:

• empty it when a user clicks on an "X" symbol (see other issue: #86)
• empty it when a user navigates to a different option using the nav menu instead of the typeahead

My idea was to incorporate the selected option in state. When the typeahead input should empty, I would pass it's inputProps an apropriate option (I am not 100% sure what this option would look like though).

My options are built like this example:

{
  'value': 'A7EDF4A9-9501-46A0-82E1-51CC567EC83F',
  'label': 'Clematis recta L. (Aufrechte Waldrebe)'
}

To see if this basically works, I tested if I could pass a specific option via inputProps like this:

getInitialState () {
  return {
    itemFiltered: {
      'value': 'A7EDF4A9-9501-46A0-82E1-51CC567EC83F',
      'label': 'Clematis recta L. (Aufrechte Waldrebe)'
    }
  }
}

and inside render:

const { itemFiltered } = this.state

(some code constructing options from props and removeGlyphStyle)

return (
  <div id='filter'>
    <div style={{position: 'relative'}}>
      <Glyphicon
        glyph={'remove'}
        style={removeGlyphStyle}
        onClick={this.onClickEmptyFilterField}
      />
      <Typeahead
        inputProps={itemFiltered}
        options={options}
        filterOption={'label'}
        displayOption={'label'}
        onOptionSelected={this.onSelectObject}
      />
    </div>
  </div>
)

Unfortunately the passed in option does not appear in the typeahead input.

What am I doing wrong?

Using 'react/addons' vs 'react-addons' package

Wondering if there are plans to update to the new 'react-addons' package that fixes issues that users might run into in a Browserify environment?

Allow react elements as children for TypeaheadOption and Token

Using objects rather than strings as entries is useful if the options must have custom visualisations (for example: a user with his profile picture, a document title with a description, etc).

It seems react-typeahead works well when the supplied option is a react class rather than a string, except for the warnings because the type of children should be React.PropTypes.string.

A simple fix would be to not set the allowed type of children. You would also need to change the way the element keys are built (use element.key if element is a react component).

Thanks for this awesome lib :)

Use of key/value paired objects in the options list

Hi,

I would like to provide the tokenizer options prop with an array consisting of key/value paired objects, like: [{name: "MyName", value: "123"}]. However, I only want to display the name property of my object in the tokenizer, would that be possible? That said, I would still like to receive the full object when selecting or removing it from the tokeziner.

Thanks!

how to empty typeahead after click on "X" symbol

I'm new to React and new to react-typeahead. So please excuse if the answer is obvious.

I added an "X" symbol overlaying on the right side of the typeahead field. When the user clicks on it, the typeahead input should empty. If a list of options was shown, it should close.

How would this be done?

Documentation

Hi!
It took me a while to find out how to use the Typeahead component.
Is there a particular reason to display the example as this (current doc):

React.render(Typeahead({
  options: ['John', 'Paul', 'George', 'Ringo'],
  maxVisible: 2
}));

instead of this (as I actually got to make it work with other components):

<Typeahead
  options={ ['John', 'Paul', 'George', 'Ringo']}
  maxVisible={2}
/>

Thanks!

Fran

Add id and name field to the typeahead, tokenizer

Hey there,

Thanks for this component. Works great. If you can please let me know, how to add id and name attribute on input field?

Thank you,
Gaurav

Highlight matched text

would be better if the typeahead highlights the matched strings in the suggestions list

onOptionSelected also triggers onBlur

This makes it difficult to properly handle result selection in a non-hacky way.

error since update from 1.1.1 to 1.1.2

I now get this message in the console:

Warning: Failed propType: Invalid prop `customListComponent` supplied to `Typeahead`, expected a ReactElement. Check the render method of `Filter`

I'm rendering like this:

return (
  <div id='filter'>
    <div style={{position: 'relative'}}>
      <Glyphicon
        glyph={'remove'}
        style={removeGlyphStyle}
        onClick={this.onClickEmptyFilterField}/>
      <Typeahead
        ref={'typeahead'}
        placeholder={'filtern'}
        maxVisible={10}
        options={options}
        filterOption={'label'}
        displayOption={'label'}
        onOptionSelected={this.onSelectObject}
        customClasses={{
          'input': ['form-control'],
          'results': ['list-group'],
          'listItem': ['list-group-item']
        }}/>
    </div>
  </div>
)

Filtering works though.

Remote data support

Hi,
is remote data supported?

Thanks in advance
V

.hover class position not resetting correctly

The first time you filter, there is no .hover class, until you press the down key. After you press the down arrow key once, the .hover class is positioned at the top li item.

Now hit the down arrow key three times > the .hover class is now at the fourth item. Just as expected.

Now empty the filter field and begin filtering again. Even while you enter characters (before hitting an arrow key) the .hover class is already positioned at the fourth item. When you hit the down arrow key, the .hover class moves down from the fourth to the fifth item.

I would expect it to behave like it did the first time.

Using <tab> to select with allowCustomValues results in `undefined` selection

Repro Steps

1. Load the typeahead-topcoat.html example
2. Type abcd into the text entry
3. Press <tab>

What should happen:

abcd gets selected

What actually happens:

undefined gets selected.

dynamically updating typeahead options (data)

For this use case, as the user enters text in the typeahead input box, the client code performs a REST call to the server to fetch potential matches from a database. For instance, as the user types "John Doe", the typeahead results should dynamically update with each keystroke, first matching all names beginning with "John", then "John D", etc... I've tried to bind the options to the state as such:

<ReactTypeahead.Typeahead ref="NameTypeahead" placeholder="Name"
        defaultValue={this.state.name}
        options={this.state.typeaheadResults}
        onKeyDown={this.typeaheadInputChanged}
/>

Neither defaultValue nor options props change when the state changes.
The onKeyDown handler makes the REST call and a setState() when the results come back. This has no effect on the typeahead. If I initialize state.typeaheadResults to ["test", "123"], for example, those typeahead results appear. They never change when the state changes. I've poked around in the react-typeahead source and am lost. Am I setting this up wrong?

Remove option from the options array when added (tokenizer)

Currently I'm able to search for an option already added, although I cannot add it twice. Is there a solution to hide an option from the options array, once it has been added?

List should not be visible when defaultValue is provided

I'm not sure if this is how it was designed to work or not; however, when I provide a defaultValue in props, Typeahead starts up with an open list if the defaultValue matches one of the options. And it seems like it was done on purpose since the visible state is not set to false initially:

getInitialState: function() {
    return {
      // The set of all options... Does this need to be state?  I guess for lazy load...
      options: this.props.options,

      // The currently visible set of options
      visible: this.getOptionsForValue(this.props.defaultValue, this.props.options), // this should be false since we don't want to show the list when we first load the page with a defaultValue set

      // This should be called something else, "entryValue"
      entryValue: this.props.defaultValue,

      // A valid typeahead value
      selection: null
    };
},

Was this behaviour intended?

Include `package.json`

People should be able to use this from https://github.com/facebook/react-page as long as there is a package.json file. This could be one of the first "shared" components that we use as an example if you like.

You can also define your CSS rules using JS directly using what Hedger built:
https://github.com/hedgerwang/react-styles.

That way, everything your component needs is completely encapsulated in a single github repo, and dependencies are modeled correctly using package.json files.

using an array of objects as options

I've been looking through the source and it doesn't seem it is possible to use an array of objects as the data source. Am I correct in assuming this?

For example:

options=[{value: "1", name: "The First"},{value: "2", name: "The Second"}]

Default classes conflict with several CSS Libraries

It is only possible to add classes to elements, and it is not possible to remove the default classNames.
Should a prop allow default classNames to be removed?

Make Typeahead component select first option by default

It would be useful if the Typeahead component selected the first matching option automatically. When it's the option you want you could just hit return without having to use the arrow keys at all. Happy to send a PR.

Does not work with NPM and Webpack

ERROR in ./~/react-typeahead/src/typeahead/index.js                                                                                                                                                        │
Module parse failed: /Users/cgarvis/projects/peach.corp/node_modules/react-typeahead/src/typeahead/index.js Line 90: Unexpected token <                                                                    │
You may need an appropriate loader to handle this file type.                                                                                                                                               │
|       ) {                                                                                                                                                                                                │
|       return (                                                                                                                                                                                           │
|         <TypeaheadSelector                                                                                                                                                                               │
|           ref="sel" options={this.state.visible}                                                                                                                                                         │
|           customValue={this.state.entryValue}                                                                                                                                                            │
 @ ./~/react-typeahead/src/react-typeahead.js 1:16-38                                                                                                                                                      │
                                                                                                                                                                                                           │
ERROR in ./~/react-typeahead/src/tokenizer/index.js                                                                                                                                                        │
Module parse failed: /Users/cgarvis/projects/peach.corp/node_modules/react-typeahead/src/tokenizer/index.js Line 55: Unexpected token <                                                                    │
You may need an appropriate loader to handle this file type.                                                                                                                                               │
|     var result = this.state.selected.map(function(selected) {                                                                                                                                            │
|       return (                                                                                                                                                                                           │
|         <Token key={ selected } className={classList}                                                                                                                                                    │
|           onRemove={ this._removeTokenForValue }                                                                                                                                                         │
|           name={ this.props.name }>                                                                                                                                                                      │
 @ ./~/react-typeahead/src/react-typeahead.js 2:16-38

Tokenizer doesn't pass props.onKeyDown to Typeahead

404s on example

Probably a bug with htmlpreview.

GET https://raw.githubusercontent.com/fmoo/react-typeahead/master/node_modules/react/dist/react-with-addons.js 404 (Not Found) htmlpreview.min.js:1
GET https://raw.githubusercontent.com/fmoo/react-typeahead/master/node_modules/react/dist/JSXTransformer.js 404 (Not Found) htmlpreview.min.js:1
Resource interpreted as Script but transferred with MIME type text/plain: "https://raw.githubusercontent.com/fmoo/react-typeahead/master/dist/react-typeahead.js". htmlpreview.min.js:1
Refused to execute script from 'https://raw.githubusercontent.com/fmoo/react-typeahead/master/dist/react-typeahead.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. ?https://github.com/fmoo/react-typeahead/blob/master/examples/TypeaheadTokenizer-simple.html:1
Download the React DevTools for a better development experience: http://fb.me/react-devtools VM155:4565
Uncaught Error: Cannot find module 'react' VM155:1
s VM155:1
(anonymous function) VM155:1
../keyevent VM155:20601
s VM155:1
(anonymous function) VM155:1
./tokenizer VM155:20589
s VM155:1
e VM155:1
(anonymous function) VM155:1
(anonymous function) VM155:1
(anonymous function) VM155:1
HTMLPreview.loadJS htmlpreview.min.js:1
(anonymous function)

Replace gulp-react with gulp-babel

Facebook is deprecating jstransform and react tools in favor of babel:

https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

Asynchronously get the option list

How can implement react-typeahead if the options are brought from the server asynchronously?

Thanks!
Fran

token customClass broke with update to react 0.12

we replaced a call from copy props to with property expansion which behaves differently for className.

React.js is part of compiled file

I use Require.js, not browserfy, so I was going for the compiled file. I was a little surpised when I saw that the compiled file weighs in at 677kb, but then I saw it includes React.js itself, which isn't a good idea in my opinion.

Just like a jQuery plugin doesn't include jQuery, a React component should include React itself. It's fairly logical that a React component is is a depending on you to load in React for it to work.

Allow custom keying and separate display string from

I may be overlooking this but with a quick glance:

react-typeahead/src/typeahead/selector.js

Lines 63 to 67 in 7702336

	<TypeaheadOption ref={displayString} key={displayString}
	hover={this.state.selectionIndex === results.length}
	customClasses={this.props.customClasses}
	onClick={this._onClick.bind(this, result)}>
	{ displayString }

It looks like display string determines key. I don't think this should be the only behavior -- I propose maybe the value from filterOption or another iterating function to be used as the key.

Also having a react component returned from displayOption makes a lot of sense, but it seems like you can't do that.

how to focus the typeahead

here comes noob's next question ;-)

I am instantiating inside render like this:

return (
  <div id='filter'>
    <div style={{position: 'relative'}}>
      <Glyphicon
        glyph={'remove'}
        style={removeGlyphStyle}
        onClick={this.onClickEmptyFilterField}
      />
      <Typeahead
        ref={'typeahead'}
        placeholder={'filtern'}
        maxVisible={10}
        options={options}
        filterOption={'label'}
        displayOption={'label'}
        onOptionSelected={this.onSelectObject}
        customClasses={{
          'input': ['form-control'],
          'results': ['list-group'],
          'listItem': ['list-group-item']
        }}
      />
    </div>
  </div>
)

and try to focus like this:

onClickEmptyFilterField () {
  this.refs.typeahead.focus()
}

but get this error:

Uncaught TypeError: this.refs.typeahead.focus is not a function

Am I doing something wrong?

Documentation about `defaultValue` and `allowCustomValues`

Hi!
What is the function of these? Are included in the latest release?
I've tested defaultValue and it is not working on 1.0.4.

Any quick ideas about them?

Thanks!
Fran

maxVisible is NOT available in Tokenizer

I expected the Tokenizer to allow a property of maxVisible and to pass that thru to Typeahead.

Let me know if this should be implemented. Be happy to help.

Limit # of rendered options in TypeaheadSelector pulldown

Provide some examples. Maybe some suggested css?

Invariant Violation: addComponentAsRefTo

Hi, I am trying to add your module into my project and got.
Invariant Violation: addComponentAsRefTo(...)

Am I doing something wrong?

React.render(
    <App />,
    document.getElementById('service')
);

app

var App = React.createClass({

    render: function () {
        return (
            <div className="app">
                <SearchBlock />
            </div>
        );
    }
});

SeachBlock

var React = require('react');
var Calendar = require('react-widgets').Calendar;
var Typeahead = require('react-typeahead').Typeahead;
module.exports = React.createClass({
    render: function () {
        return (
            <div className="a">
                <Typeahead options={["janet", "pete", "may", "jason"]}/>
                <Calendar />
            </div>
        );
    }
});

How to bold fuzzy search letters in results?

libraries like these often have a way to bold the characters in the results that are part of the fuzzy search.
Is there a way to get this one to do that?

Example:

onKeyDown Does Not Work

Hey there...

I'm trying to get the onKeyDown event to fire. My component looks like this:

export default React.createClass({
  getDefaultProps() {
    return {
    };
  },

  keyDown(){
    alert('blur!');
  },

  render() {
    return (
      <div>
        <ReactTypeahead.Tokenizer
          onKeyDown={this.keyDown}
          customClasses={{
            typeahead: "topcoat-list",
            input: "topcoat-text-input",
            results: "topcoat-list__container",
            listItem: "topcoat-list__item",
            token: "topcoat-button"
        }} />
      </div>
    );
  }

The onKeyDown event in the above example is not firing. What am I doing wrong? Thanks!

Example for FilterOption Prop

Would it be possible to have a small example of filterOption function?

Thanks in advance

Set a value programatically

Hi!
I need to set a value to the Typeahead programmatically and I can't seem to find the correct way, I used defaultValue but it does not work, any ideas?

Thanks a lot!
Fran

Allow value to be changed from higher level

It seems that value is only used on component construction, and not respected if changed afterwards.

I would like to be able to change the value / default value of the component based on an external value.

Select on enter key if the text match an option (no need to select with the down arrow key)

typeahead-has-selection and selectionMade customClasses

we should set a custom class on the text entry or typeahead when a selection has been made.

This makes it more obvious when a value has been selected vs just having text in the entry.

tab is always prevented

I think the behaviour behind the TAB key is not good as it is... When I press tab the component picks the first option, which is nice, but if I press tab again I should go to the next focusable element in HTML. Moreover, I think this should happen when you hit TAB the first time.

What are your thoughts?

Using with browserify and Babeljs fails when bundling

Due to babeljs being able to convert JSX to JS, a situation can arise where reactify is not a dependency of the project.

In that case, bundling with browserify will fail due to reactify not being present.

This is due to the entry in package.json:

  "browserify": {                                                    
    "transform": [                                                   
      "reactify"                                                     
    ]                                                                
  },   

Possibly adding lib folder to the repository

Hi,

I was thinking is it possible to add lib folder to the repository. As you know, using npm, we can install packages from the git repo itself and I wanted to use latest version of the component without waiting for the release but currently, if I install it from the git repo, it will not able to run properly as its start up file is reference to /lib folder.

check https://github.com/fmoo/react-typeahead/blob/master/package.json#L41

Thanks

how to get selection with down arrow key working

First of all: thanks for this great tool. In my App I load 50'000 options and react-typeahead works BLAZING fast!

Also: Sorry for asking this here. There is (almost) no mention of react-bootstrap on stackoverflow yet.

I want the user to be able to choose an option (after having entered some letters) by navigating down with the down arrow key, then choosing it with the Enter key.

This works in the examples you provide.

I found nothing in the docs about how to achieve this though. And in my app it does not work.

I am instantiating it like this:

const filter = (
  <Typeahead
    placeholder={'filtern'}
    maxVisible={10}
    options={options}
    filterOption={'label'}
    displayOption={'label'}
    onOptionSelected={this.filter}
    customClasses={{
      'input': ['form-control'],
      'results': ['list-group'],
      'listItem': ['list-group-item']
    }}/>
)

const nothing = <div/>

return (
  <div id='filter'>
    {this.state.loading ? nothing : filter}
  </div>
)

The custom classes are for twitter bootstrap.

Dependency on react/addons

Is there a reason react-typeahead has a dependency on react/addons?

I changed the requires in the component files to react and ran the tests and everything passed.

Maybe I'm missing something. ¯\_(ツ)_/¯