Data Results Not Showing

[hackingbeauty]

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!

[ezequiel]

Hey @hackingbeauty,

Is there any reason you want the make the API call on key press? Why not onChange? onKeyPress is usually not desired for this use case, as it will be called on any key press, like Shift or Cmd.

The dropdown will only open if there are options to display. You must pass the options array in as a prop. Also, make sure you pass in an optionTemplate which will be called on each option. This will dictate how each option will render.

I've fixed your example to correctly fetch the data, and set options. Let me know if you need anymore help.

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';

export default React.createClass({
  getInitialState: function() {
    return {
      inputValue: '',
      options: []
    };
  },

  getDefaultProps() {
    return { 
    };
  },

  handleHint(){
    return 'blahblahblha';
  },

  handleComplete(){
    alert('complete!');
  },

  handleChange(event) {
    var enteredChars = event.target.value;

    this.setState({
      inputValue: enteredChars
    });

    $.ajax({
      url: googleUrl,
      dataType: 'jsonp',
      data: {
        q: enteredChars
      },
      success: function( results ){
        console.log('the results are: ', results);

        this.setState({
            options: results
        });
      }.bind(this)
    });
  },

  render() {
    return (
      <div>
        <Typeahead
          inputValue={this.state.inputValue}
          options={this.state.options}
          inputId={this.props.id}
          autoFocus={true}
          placeholder='Search Youtube'
          onKeyUp={this.onKeyPress}
          optionTemplate={OptionTemplate}
          onChange={this.handleChange}
          handleHint={this.handleHint}
          onComplete={this.handleComplete} />
      </div>
    );
  }
});

[ezequiel]

Hi @hackingbeauty,

Closing this as it seems you've fixed the issue on your end.