ezequiel / react-typeahead-component Goto Github PK
View Code? Open in Web Editor NEWTypeahead, written using the React.js library.
License: MIT License
Typeahead, written using the React.js library.
License: MIT License
Howdy -
I've been hunting for a nice typeahead for react for a while. I use SystemJS to load modules, generally by downloading their minified source from the /dist
folder & checking that into our source control. This works fine for all the 3rd party stuff we use that's packaged up with webpack. I cannot get this module to load via SystemJS. Browserify is doing some funkiness with _process
and require('react')
- both of which throw errors for me. Would you be interested in me forking this & changing the build process to generate a distribution bundle with webpack instead of browserify? That library seems to generate distribution bundles that are more easily consumed with client-side module loading.
It would be nice to add tabIndex property for text input.
Hi!
I'm having some trouble using react-typeahead-component on mobile devices namely iOS (iPhone 4S, iPad 2) devices with Chrome.
When I try to select the input, nothing happens. It seems that the input that gives the typeahead look is getting the focus event instead of the actual input where the user needs to write.
I was able to reproduce this using your Youtube example: http://ezequiel.github.io/react-typeahead-component/youtube/
Any ideas on how to fix this?
Cheers!
Hi,
Any plans on updating this to use latest version of react (v15)?
I am getting the following error when I try to install this.
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "react-typeahead-component"
npm ERR! node v4.2.2
npm ERR! npm v2.14.7
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@>=0.12.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.1
npm ERR! peerinvalid Peer [email protected] wants react@>=0.13.1 <1.0.0
npm ERR! peerinvalid Peer [email protected] wants react@>= 0.13.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0-0
I'm getting this warnings in console due to a getDOMNode used in typeahead:
Typeahead.getDOMNode(...) is deprecated. Please use ReactDOM.findDOMNode(instance) instead.
if (target !== window && !this.getDOMNode().contains(target)) {
_this.hideHint();
_this.hideDropdown();
}
Any plan to upgrade to new react?
Hi,
Thanks for making this component! I'm not sure if you've tested this with react 0.14 yet, or if you're planning to support it in the future? Right now it will not install due to peerDependencies using npm 2.x w/ react 0.14-betax
It will install with npm 3, but I haven't extensively tested it yet.
Hi, I can't get the input value via the onKeyPress event. How do I get the input value? Here's my current code:
import React from 'react';
import Typeahead from 'react-typeahead-component';
import OptionTemplate from './OptionTemplate.jsx';
export default React.createClass({
onKeyPress(inputChar){
var key = inputChar.key;
var inputVal = $(this.props.id).html();
},
render() {
return (
<div>
<Typeahead
optionTemplate={OptionTemplate}
autoFocus={true}
placeholder='Search Youtube'
onKeyPress={this.onKeyPress}
onComplete={this.handleComplete} />
</div>
);
}
});
Is this component have react ES6 support ?
I wrapped <Typeahead>
in a container div, and set tabIndex=1
on this container, then onOptionClick
can't fire any more. I think maybe it's because of capture focus
event in this line?
addEvent('focus', handleWindowClose, true);
The previousInputValue
value is not updating when using multiple tokens. Right now the value is only updated if previousInputValue
equals null
. Is it possible to update this value always before Arrowing Up and Down?
Hello,
I'm trying to duplicate the Youtube autocomplete example; however, the react-typeahead-component is not displaying the drop-down section. Here is my code:
import React from 'react';
import Typeahead from 'react-typeahead-component';
import OptionTemplate from '../templates/OptionTemplate.jsx';
import $ from 'jquery';
let googleUrl = '//suggestqueries.google.com/complete/search?client=youtube&ds=yt&q=';
export default React.createClass({
getInitialState: function() {
return {
inputValue: ''
};
},
getDefaultProps() {
return {
};
},
onKeyPress(i){
var enteredChars = this.state.inputValue;
var self = this;
$.ajax({
url: googleUrl,
dataType: 'jsonp',
data: {
q: enteredChars
},
success: function( results ){
console.log('the results are: ', results);
self.handleHint(results);
}
});
},
handleHint(){
return 'blahblahblha';
},
handleComplete(){
alert('complete!');
},
handleChange(event) {
this.setState({
inputValue: event.target.value
});
},
render() {
return (
<div>
<Typeahead
inputValue={this.state.inputValue}
inputId={this.props.id}
autoFocus={true}
placeholder='Search Youtube'
onKeyUp={this.onKeyPress}
optionTemplate={OptionTemplate}
onChange={this.handleChange.bind(this)}
handleHint={this.handleHint}
onComplete={this.handleComplete} />
</div>
);
}
});
What am I doing wrong? Thanks!
There's onOptionClick
for when an option is clicked but how do you detect option selection when the user presses Enter after moving up and down with arrow keys?
I'm having to directly add a listener to the input element to listen for blur events so I can do a proper check for if a new value has actually been selected, either by hitting "Enter" or by clicking. It would be nice if there was an event for when the dropdown is closed, this way I know that the user is done.
Hi,
I would like to have a more generic option change handler as I have a number of typeahead controls on the page each with a different input id. Would it be possible to enhance the handler calls to include the input id alongside the options parameter.
Thx
I have been running into an issue where onOptionClick() will not fire in Internet Explorer. I think it is an issue with the handleWindowClose event getting fired when it shouldn't be.
I think the culprit is in typehead.js:103
addEvent('focus', handleWindowClose, true);
From there, moving down to the handleWindowClose() function, It looks like the event target is the entire window, not the option I just clicked.
Setting capture to false on line 103 seems to fix the issue. I believe the root cause is that the bubbling causes the focus on the window first instead of the option actually clicked. Therefor, the dropdown just closes without triggering an onOptionClick.
Any thoughts on this?
Hi!
Thank you so much for typeahead component! It works really well!
I'm having a small issue with server-side rendering. I don't know if you ever tested this.
From what I've gathered, when document exists you inject some css. This generates an issue with server-side rendering, because the rendered DOM on the server is different from the one rendered on the browser, giving the nasty error above.
Can you consider embedding the CSS into the JSX or providing it as a separated file to be included with less or into the head ?
Cheers!
@ezequiel There is a checksum error when rendering isomorphically. You are setting disabled: true on your input which React re-writes to disabled for an input.
It would be cool if you could do multiple queries for a given input, and have queries saved as tags in the input field.
Something similar to this: https://github.com/olahol/react-tagsinput
Have you thought about adding something like this?
The fact that classNames aren't configurable makes it difficult to use this component with something like bootstrap. It would be really nice if your exposed a dictionary of classnames that could be overridden by the user eg:
customClasses={{{
input: "form-control"
}}
On Chrome, browser autocomplete shows up and overlaps with the typeahead dropdown.
Chrome on desktop now supports autocomplete=off
Reference thread:
https://code.google.com/p/chromium/issues/detail?id=468153#c123
First off, thanks for this component. It's pretty awesome. Though I'm having some problems with focus management. The problem is that, following a selection from the drop-down menu, or pressing Enter
from the input, the focus disappears form the input
element rather than return to it. And though it's possible to use e.currentTarget.focus()
from onKeyDown
, for example, it's not possible to do so from onOptionClick
. Rather than handling this behavior in callbacks it'd be nice to see it as a default behavior. Thoughts?
First of all - this component is royal awesomeness. Configurability is way beyond anything else.
I've got a slight issue, though: I'm using it for a quick entry mechanism - think freehand text turned into structured data upon selection. When each word is being typed, we're going to give you suggestions as to what it might be (based on what property of the structured data we think you are specifying atm). So, I'd like to be able to select a suggestion and continue typing without dropdown closing down on me. Currently, there's no way to prevent it from closing.
There are 2 solutions that crop into my mind:
event.preventDefault()
- pros: the component itself will continue handling open/close state, which makes development a breeze. cons: jQuery-like not react-like.Or maybe there's already a configuration and I'm simply missing it?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.